YouYube ?? ??? ???? Floating Video ??????? Make a Floating Video When a Page is Scrolled

??? ????? ??? ?? ??????? ?????? ??? ???? ??. ???? ?? ?????? ?? ??? ?? ?? ?? ????? ?? ???? ??????? ???? ??? ?? ?????? ???????? ??? ?? ?? ????? ?? ?????? ????? ?? ?? ????? ??????? ???? ???? ??? ?? ?????? ????? ??? ?? ?? ????? ???? ??? ???

YouYube ?? ??? ???? Floating Video ???????

??? ?????? ??????? ?? ??? ?????? ???? ???? ???. ?? ???? ??? ?? ?? ??? ?? ????-??? ??????? ???? ??, ?? ?????? ???? ???? ???? ????? ???? ???? ??. ????? ???? ?????? ?????/????? ??? ???? ???? ?? ????? ?????? ????? ?? ???? ?? ???? ??.  

YouTube ?? ??? Video Floating ???? ???? ??????? ???? ??????

?? ??? ???? ?? ???? ??? Website ??, ?? ?? Code ?? ????? ?? ?? ??? ???? ??. 

???? ??? javascript, css, html code ?? ???????? ?? ?? ?? ???? ??????? ??????? Floating Video ??? ???? ??. 

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="https://www.youtube.com/embed/XHS66nv5rp0?autoplay=1"></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%}.floatvideo.fly{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>

???? ???? ?????? ????? ???? ?? ??? ?? XHS66nv5rp0 ??? ??? ?? Video ID ?? ??? ???? ???? Video ID ????? ?????
??? ?????? ???? Video ID?

?? ??????? ?? ???? ??? ?????? ???? ???. ?? ?? URL ??? ???? ???? ???? ?????? ???? ??? ???

https://www.youtube.com/watch?v=9FYmuTJhqQo&t

?????? ??? ?? ??????? ???? ??, ?? ??? ????? ???? ??????? ?? ???? ??? ?? ??? ??? ?? javascript, css, html code ??? ??? ??? ?? ??????? ??? ?? ????? ?? ???? ??.

<iframe allow="autoplay" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/XHS66nv5rp0?autoplay=1"></iframe> ?? ?? ???? YouTube Floating Video iframe.

• XHS66nv5rp0 -- ?? ?? ???? ?????? ID ?????
• ?autoplay=1 -- ?? ???? autoplay ??? ??, ???? ?????? ???? ?? ???????? ???? ????? ????? ?????? ?? ????? ?????? ?? ???? ??? ?? ????? ???? ?????

??? ?? ????? ???, ?? ?????? ???????? ???? ???? ?? ?? ?? ?? ?autoplay=1 ?? ????? ?? ???? ???.

Floating Video ??? ?? ???? ???????? ???? ?????

?? ?? ?? ?? ??? ??? ??? ??? ???? ??, ?? ??? ???? ?? ??? ?? ???? ??? ?? Compose ?? ??? HTML ?? ??????? ???. ?? ???? ??? ??? ????? ???? ?????? ??? ?? ????? ?? ???? ??. ??? ???? ???? ??? ??? ????? ?? ??. ?? ??????? Video ID Link Change ?? ??. 

?? ??? ?? HTML ?? ??? Compose ?? ??????? ??? ?? ?? ?????? ?? ???? ??? ????? ???? ???. 

??? ?? Youtube ?? ?????? ?? ????? ???? ?????? ?????? ????? ??? ?? ???? ?????

????, ?? ???? ?? ?? ?????? ???? ?? ???? ?? ?????? ???? ??? ??, ?? ???? ???? ?????? ?? ?????? ???? ??? ???? ??. Dailymotion, Vimeo ?? ?? ???????? ?? ???? ??. ???? ??? ?? https://www.youtube.com/embed/XHS66nv5rp0?autoplay=1 ???? ???? ?? ???? ??.

???????? ?? ???, ?? ???? ??? ?? ??? ?? ????? ?? ???? ???, ????? ???? ?? ??? ????? ???? ??? ?? ????-??? Scroll ???.

          Demo          

• How to change video Embed size in blogger. Creating a responsive YouTube embed.

???? ?????? ?? ?? ?? ??? "YouYube ?? ??? ???? Floating Video ??????? Make a Floating Video When a Page is Scrolled" ???? ???? ??? ????? ?? ??? ???? ???? ????? ????? ??? ?? ?? ??? ???? ???? ?? ??? ???? ???. ?? ???? ??? ?? ?????? ?? ????? ?? ??? ???? ????? ????? ??? ????? ?? ???? ??? ???? ???. ??? ?? ???? ?? ??? ???????!