How to Make a Video Float when Page Scrolls on Blogger

Cool !! This is How to Make a Video Float when the Page is Scrolling on Blogger - Blogger friends must have seen the feature where videos can float when we're scrolling the page. 

Usually you can find it while playing Twitter or YouTube. 

READ MORE

We can shrink the video display screen and make it float, so we can watch it while scrolling through the page to explore other pages. 

This feature is perfect for those of you who often embed videos from YouTube to further complement your writing. 

With this floating video feature on Blogger, you can help your readers to keep playing the video while scrolling the page so they can keep reading the articles that have been written. 

The Floating Video feature on Whatsapp has also recently been introduced, making it easier for users to play videos or YouTube video links, and watch them while continuing to chat. 

How to Make a Video Float when Page Scrolls on Blogger

Maybe for websites or blogs that are based on Wordpress or other CMS, you can use it easily. 

However, not many Bloggers know how to use the floating video feature when scrolling for Blogspot. 

Are you interested in using it? 

Do you already know how to install it? 

If not, here's the tutorial:

A. Installing the Floating Video Feature on Blogger

First of all we have to activate the feature to be able to make Floating Videos on Blogger. 

Go to Blogger.com

Please Sign In

Enter the Blogger Dashboard

Select the Theme menu

Then go to Edit HTML

Look for the code </head> , and attach the following CSS code just above</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>

• Next, install the following script right above the code </body>

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

Here we have successfully installed the Floating Video Feature when Page Scrolling on Blogger. 

Now, then you have to use a special code to embed the video into a blog post, so that it can sync with the Floating Video Blogger feature that was installed before. 

For how to embed the video, there are three depending on where the video source you are using is hosted, for more details, please follow the steps below. 

B. How to Embed Floating YouTube Videos on Blogger

The following is a script that can be used to install videos originating from YouTube. 

<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>

Replace the code marked with BOLD using the Video ID in the Youtube URL or Google Driver. 

Apart from installing videos sourced from YouTube, you can also use videos from Google Drive or third parties such as Video.com or others. 

Check the tutorial below. 

C. Embed Floating Video from Google Drive to Blogger

If this is a script that you can use to install Floating Video Blogger using videos that are sourced other than Google Drive. 

<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>

D. Installing Floating Videos on the Blog

Now the last one is a script that you can use to display videos that will float when the page is scrolled, with video sources other than YouTube or Google Drive. 

<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>

In this script you can adjust the width and height of the video, according to the rules on the video source site.

Closing

That's all the tutorial for making a video that floats when the page scrolls on Blogger, hopefully it can help you to edit blog features to make it cooler.