How to Making Videos Float When Page Scrolls | Droidnur123

Welcome to Droidnur123 today we will know about How to make a video float when the page is scrolled? 

What is video float when the page is scrolled? 

Maybe you have seen videos on Youtube, Vidio, or other sites where when the video is playing and you scroll the page down, the video will automatically follow where you scroll the page.

Benefits of Making Videos Float When Page Scrolls?

 

The workings of the tips that I will share are almost the same, but the difference is that the video will still float following the page that we scroll to even though the video has not been played.

Some time ago I shared tips on "How to Install Responsive Youtube Videos on Blogs", that way the Youtube video added in the post will automatically follow the screen dimensions of the device you are using.

 Well, in this tip, Droidnur will combine responsive video tips with video tips that float when scrolled. For those who are interested, you can follow the steps below.

Trips to Making Videos Float When Page Scrolls?

For that Open Blogger dashboard > then Click Theme menu and Edit HTML next to customize > Add this CSS code before</head> tag

<style>
@keyframes fade-in-up{0%{opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes littleShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
.loader{position:absolute;left:0;right:0;top:0;bottom:0;float:left;overflow:hidden;margin-right:12px;animation:littleShine .85s linear infinite;background:#f5f5f5 linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.75) 20%,rgba(255,255,255,0) 30%);background-size:800px 100px}.floatvideo-wrapper{text-align:center}.floatvideo iframe{max-width:100%;max-height:100%}.floatvideo.fly{padding:0;position:fixed;bottom:20px;right:20px;box-shadow:0 8px 10px -5px rgba(0,0,0,0.15);-webkit-transform:translateY(100%);transform:translateY(100%);width:260px;height:145px;-webkit-animation:fade-in-up .25s ease forwards;animation:fade-in-up .25s ease forwards;z-index:99}.videoyoutube{text-align:center;margin:auto;width:100%}.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
@media screen and (max-width:640px){.floatvideo.fly{bottom:10px;right:10px;width:160px;height:85px}.video-responsive{padding-bottom:54%}}
</style>

Plaese Edit on the marked code like " bottom:20px;right:20px; "to determine the position of the video.

Next add the code below before </body>

<script>
//<![CDATA[
// Video Melayang
var $window=$(window),$floatvideoWrap=$(".floatvideo-wrapper"),$floatvideo=$(".floatvideo"),floatvideoHeight=$floatvideo.outerHeight();$window.on("scroll",function(){$window.scrollTop()>floatvideoHeight+$floatvideoWrap.offset().top?($floatvideoWrap.height(floatvideoHeight),$floatvideo.addClass("fly")):($floatvideoWrap.height("auto"),$floatvideo.removeClass("fly"))}),setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
//]]>
</script>

For those who have added the code from the tips on How to Install Responsive Youtube Videos on Blogs, just replace it with the code above.

At last, Then click Save theme.

And for the calling code, add this code in the post editor on the HTML mode (not Compose)

<div class='floatvideo-wrapper'>
   <div class='floatvideo'>
      <div class='videoyoutube'>
         <div class='video-responsive'>
            <div class='video-youtube loader' data-src='//www.youtube.com/embed/tO01J-M3g0U'></div>
         </div>
      </div>
   </div>
</div>

Edit the code marked with another Youtube video code

For the Demo, you can click the button below

Demo

If you want to add videos other than videos from Youtube? 

The answer is, it depends. It depends on which site the video link comes from because after I add the video link from Dailymotion and vidio.com the video doesn't appear, while the video link from Google Drive can appear.

 Examples like this:

<div class='floatvideo-wrapper'>
   <div class='floatvideo'>
      <div class='videoyoutube'>
         <div class='video-responsive'>
            <div class='video-youtube loader' data-src='//drive.google.com/file/d/0B0Ay6s7CmaBAaHNXbFAtLVZ3ZFU/preview'></div>
         </div>
      </div>
   </div>
</div>

Demo

To add videos from iFrames other than Youtube make sure your video format is like this:

<div class='floatvideo-wrapper'>
   <div class='floatvideo'>
      <iframe width='600' height='340' src='LINK-VIDEO-DI-SINI' frameborder='0' gesture='media' allowfullscreen></iframe>
   </div>
</div>

Please, Edit the marked section.

Thanks, that's it from me on "how to make a video float when the page is scrolled". Hopefully, with these amazing tips, you can make your site more interesting and generate new ideas for making other code floats when scrolled, for example like the share button in the post section. Thank you for visiting and greetings.

Go to Link