How to add Sticky, Floating video on Page Scroll in blogger

How to add Sticky, Floating video on Page Scroll in blogger

How to add Sticky, Floating video on Page Scroll in blogger







You may have seen sticky, floating video on different websites like you are watching a video on any website and when you scroll down video is automatically fixed to the bottom of a webpage and when you scroll up the video Returns to its previous position that is basically called sticky floating video on page scroll.

You can add sticky, floating video on page scroll in blogger as well as in WordPress technique is same. for this tutorial we will be using the jQuery code to do that functionality.

I always try to provide you a demo and I will try to include the demo of this sticky floating video on page scroll you can scroll down and have a look on it.

So I will teach you or I will tell you how you can add this to your blogger blog for that you have to follow the steps which are listed below.

To make this functionality work properly you will need to have latest version of jQuery installed in your blogger blog.

  1. Go to Blogger Dashboard
  2. Go to Theme/Template Section
  3. Click Edit HTML
  4. Now Search for </head>
  5. To search anything in blogger template section press Ctrl+F and then type term to search and press enter.
  6. Now copy the code provided below and paste it above ending head tag which we have founded in step 4.
  7. <style>
    @-webkit-keyframes fade-in-up {
      0% {
        opacity: 0;
      }
      100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
        opacity: 1;
      }
    }
    
    @keyframes fade-in-up {
      0% {
        opacity: 0;
      }
      100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
        opacity: 1;
      }
    }
    .video-wrap {
      text-align: center;
    }
    
    .video iframe {
      max-width: 100%;
      max-height: 100%;
    }
    .video.stuck {
      position: fixed;
      bottom: 20px;
      right: 20px;
      -webkit-transform: translateY(100%);
              transform: translateY(100%);
      width: 260px;
      height: 145px;
      z-index:99999;
      -webkit-animation: fade-in-up .25s ease forwards;
              animation: fade-in-up .25s ease forwards;
    }
    
    </style>
    <script>
    //<![CDATA[
    var $window = $(window);
    var $videoWrap = $('.video-wrap');
    var $video = $('.video');
    var videoHeight = $video.outerHeight();
    
    $window.on('scroll',  function() {
      var windowScrollTop = $window.scrollTop();
      var videoBottom = videoHeight + $videoWrap.offset().top;
      
      if (windowScrollTop > videoBottom) {
        $videoWrap.height(videoHeight);
        $video.addClass('stuck');
      } else {
        $videoWrap.height('auto');
        $video.removeClass('stuck');
      }
    });
    //]]>
    </script>
  8. Save Theme/Template
  9. Now where, in your webpage you want to show your video use the html code provided below.
  10. <div class="video-wrap">
        <div class="video">
          <iframe width="600" height="340" src="https://www.youtube.com/embed/JnBJZDYH_dc" frameborder="0" gesture="media" allowfullscreen></iframe>
        </div>
      </div>
  11. If you don't need errors, Then use the code as it is just simple replace highlighted text in html code with youtube video id.

Conclusion:
This method works in all video providers like youtube, vimeo, etc That's it i think that this tutorial was helpful for you i provided you this tutorial now its your turn to give your feedback in the comment section below and let me know that you like this sticky, floating video on page scroll or not.

9 Comments

Help us improve this article by leaving your feedback below.
  1. Admin
    Admin 25 Jan 2021, 07:40:00

    No funciona amigo debe haber algo mal en el código. ¿Puedes ayudarme?

    Reply Delete
  2. Admin
    Admin 1 Jun 2021, 14:16:00

    Not working.. I've followed all the steps.. didn't work for me.. :(

    Reply Delete
  3. PC Loader
    PC Loader 14 Jun 2021, 20:38:00

    No funciona

    Reply Delete
  4. Admin
    Admin 7 Dec 2021, 22:51:00

    Check your trick again...it is not working for anyone but only for you. I think, you have missed something to mention here in this article. Please recheck and update the article accordingly. Thanks.

    Reply Delete
  5. Tech Science Malayalam
    Tech Science Malayalam 10 Aug 2022, 21:40:00

    Working Bro! But 2 annoying issues! can you please fix that? (1) - always floating the YouTube video! that's its so annoying! (2) YouTube video only float ! that video played to scroll

    Reply Delete
Add Comment
Previous Post Next Post