How to Create Floating Videos When a Page is Scrolled

How to Create Floating Videos When a Page is Scrolled - How do you make a video float when the page is scrolled? Maybe you've seen videos on Youtube sites, videos or other sites that when the video is playing and you scroll the page down then the video will automatically follow where you scroll the page. The workings of the tips I will share are almost the same, but the difference is that the video will still float following the pages we scroll even though the video hasn't been played.

In this tip I will combine responsive video tips with tips on floating videos when scrolling. For those who are interested, you can follow the steps below.

Create Floating Videos When a Page is Scrolled

Open the Blogger dashboard >> Click the Themes menu and Edit HTML >> Add this CSS code before </head>

<style type='text/css'>
@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>

Note : Edit in the marked code to determine the position of the video.

Then add the code below before </body>

<script type='text/javascript'>
//<![CDATA[
// Floating Videos
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>

Then click Save theme

And for the calling code, add this code in the post editor on the HTML tab (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>

Note : Edit the code marked with another Youtube video code

What if you want to add videos other than videos from Youtube? The answer, depends. It depends on the site where the video link came from, because after I added the video link from Dailymotion and vidio.com the video didn't appear, while for the video link from Google Drive it could 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>

To add videos from iFrame other than Youtube the format is like this:

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

That's enough of me about How to Create Floating Videos When a Page is Scrolled. Hopefully these tips can make your site more interesting and bring new ideas to make other code float when scrolling, for example, like sharing buttons in the post section. Thank you for visiting and good luck.

Share :