Make a Floating Video When a Page Is Scrolled

You might have seen a video on desktop Youtube site, or another site that when the video is playing and you scroll the page down then the video will automatically follow where you continue scrolling.

Make a Floating Video When a Page Is Scrolled

In this article I'll share this trick as to how to make a floating video when the page is scrolled? However using this trick, you will find, the video even when not played, is getting scrolled all the way.

I also wrote about uploading responsive video from YouTube on your blog posts, here I'll have to combine both tricks to get the result as said. Let's get started.

How to Make a Floating Window when page is scrolled?


1. Open Blogger Dashboard, head over to Themes. Click on Edit HTML. Enter the CSS code before </head>

<style type="text/css">
@keyframes fade-in-up{0%{opacity:0}100%{-webkit-transform:translateYundefined0);transform:translateYundefined0);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-gradientundefinedto right,rgbaundefined255,255,255,0) 5%,rgbaundefined255,255,255,.75) 20%,rgbaundefined255,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 rgbaundefined0,0,0,0.15);-webkit-transform:translateYundefined100%);transform:translateYundefined100%);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 undefinedmax-width:640px){.floatvideo.fly{bottom:10px;right:10px;width:160px;height:85px}.video-responsive{padding-bottom:54%}}
</style>

2. Now add the following code before </body>

<script type='text/javascript'>
//<![CDATA[
// Floating Videos
var $window=$undefinedwindow),$floatvideoWrap=$undefined".floatvideo-wrapper"),$floatvideo=$undefined".floatvideo"),floatvideoHeight=$floatvideo.outerHeightundefined);$window.onundefined"scroll",functionundefined){$window.scrollTopundefined)>floatvideoHeight+$floatvideoWrap.offsetundefined).top?undefined$floatvideoWrap.heightundefinedfloatvideoHeight),$floatvideo.addClassundefined"fly")):undefined$floatvideoWrap.heightundefined"auto"),$floatvideo.removeClassundefined"fly"))}),setTimeoutundefinedfunctionundefined){$undefined".video-youtube").eachundefinedfunctionundefined){$undefinedthis).replaceWithundefined'<iframe class="video-youtube loader" src="'+$undefinedthis).dataundefined"src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
//]]>
</script>

3. Save Changes to your theme.




4. Type in the following code in the past where you want floating video window.

<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 embeed code with another Youtube video code.

If you want to add videos from other sites, then use this code instead in 4.:

<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 alone, try this code:

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

Adjust width and height as needed

Hopefully, you'll find such new trick useful for your blog. Show your Love in comments below.

0 Comments

Post a Comment

Read Comment Policy before commenting.