How to make a floating video like YouTube

You can make a floating video while creating a website page. When the video is playing and you scroll down the page, the video will automatically follow the page as the page scrolls. Whether the video is played or not.

Like you play a video on YouTube. And after that, when we scroll down the page, the video size remains small and is visible. Due to which we can play another video list without turning the video on / off. Best Computer Software for Video Editing

How to create a video floating website like YouTube?

YouTube की तरह कैसे Floating Video बनायें? Make a Floating Video When a Page is Scrolled
Website Floating Video Example

Or if you already have a website, you can build using this code.
You can also create floating videos in your website using JavaScript, CSS, HTML code given below.

Make a Floating Video When a Page is Scrolled
<div class='floatvideo-wrapper'>   <div class='floatvideo'><div class="embed-container" class='video-youtube loader' ><iframe allow="autoplay" allowfullscreen="" frameborder="0" src=""></iframe></div></div></div><script type='text/javascript'>//<![CDATA[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" ></iframe>')})},5e3);//]]></script><style type='text/css'>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: -10px; left: 0; width: 100%; height: 100%;}@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:0px;}.floatvideo-wrapper{text-align:center}.floatvideo iframe{max-width:100%;max-height:100%}{padding:0;position:fixed;bottom:40px;right:0px;-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}</style>

To use your own video, you must write your video ID instead of this XHS66nv5rp0 red color video ID.

Where can I get my video ID?

Open YouTube and play a video. Now you see in the URL below an example.

Copy the highlighted text in pink color and paste the red colored text in place in the above JavaScript, CSS, HTML code.

<iframe allow = "autoplay" allowfullscreen = "" frameborder = "0" src = ""> This is YouTube floating video iframe.

XHS66nv5rp0 – This is your video ID link.

?autoplay=1 – This is your autoplay code, that is, the video will play automatically. But not on mobile. Clicking on the play button in mobile.

If you want the video not to play automatically, can you delete it.- ?autoplay=1.
Where to use floating video code?
When you are writing an article, copy the code from here and choose HTML instead of Compose. And some code will appear in it, you can remove them all. Then paste the copied code. And replace the YouTube video ID link.
Now again choose Compose instead of HTML and start writing about that video.
What if you want to add videos other than videos from Youtube?

The answer also depends on the site where the video link came from, you can add a video link to your Google Drive. Dailymotion can also use Vimeo. For this the link has to be changed.
For results, you can click on the button below, after clicking, scroll down the page that opens.

I hope you liked this article “How to make a floating video like YouTube? Make a temporary video when the page is scrolled”. If you really like my hard work, then share it with your people. Or for any kind of questions and suggestions, you can tell us by commenting in the comment box below. Thanks for reading the article!

Leave a Reply