Blogger için Sayfayla Birlikte Kayan Responsive Video

Blogunuzda hem video hemde uzun uzun içerik paylaşıyorsanız bu eklenti işinizi oldukça kolaylaştıracaktır. Okuyucularınız yazdığınız yazıyı okurken bir yandan da sayfanın sağ altında oynamaya devam eden videonuzu izleyebilecektir. Peki bu eklentiyi blogumuza nasıl kurabiliriz?

1. Adım
İlk olarak Blogger > Tema > HTML'yi Düzenle kısmına girip aşağıdaki CSS kodlarını ]]></b:skin> kodunun hemen üstüne ekliyoruz. Bu sayede videolarımız hem responsive olacak hemde sayfayla birlikte hareket edecek.

[@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;}}
.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:350px;height:186px;-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%;}}]

2. Adım
Ardından aşağıdaki JavaScript kodlarını </body> kodunun hemen üstüne ekleyelim.
Benim yaşadığım sorun: Eğer blogunuzda sticky widget-sidebar var ise bu kod sticky widget-sidebar'ınızın sorunlu çalışmasına sebebiyet verebilir. Ben bunu aşağıdaki JavaScript kodunu eklediğim her yazının HTML kısmına ekleyerek çözdüm. Sizde de sorun yaratırsa bu şekilde çözebilirsiniz.

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

3. Adım
Aşağıdaki kodu yayınımızın HTML bölümüne eklememiz gerekecek.

Aşağıda hazır bir şablon bulunuyor burada # işareti yerine Youtube videonuzun "watch?v=" dan sonra gelen kısmı yazıyoruz.
Yani video bağlantısı "https://www.youtube.com/watch?v=KLJ-jXJLPcU" bu ise blogunuza ekleyeceğiniz bağlantı "https://www.youtube.com/embed/KLJ-jXJLPcU" böyle olmalı.
Kısacası "watch?v="dan sonra gelen kısmı "#" ile belirttiğim yerle değiştiriyoruz.

[<div class='floatvideo-wrapper'>
   <div class='floatvideo'>
      <div class='videoyoutube'>
         <div class='video-responsive'>
            <iframe src='https://www.youtube.com/embed/#' frameborder='0' gesture='media' allowfullscreen></iframe>
         </div>
      </div>
   </div>
</div>]