Blogger Mobil Uyumlu Youtube Video Iframe Eklenlentisi

Blogger sitenize YouTube üzerinde beğendiğiniz yada blogunuzda paylaşmak istediğiniz videoları blogunuza eklemeyi ve YouTube videolarının mobil cihazlar üzerinde blogunuzun düzenini bozmadan oransal olarak değişkenlik göstermesini sağlamak için, blog sitesinin daha düzenli görünmesine ve kullanıcı deneyimi kazandırmak için aşağıdaki değişiklikleri blog sitenizde yapmalısınız.

Bir önceki yazımızda "Google Drive PDF Dosyalarını Mobil Uyumlu Yapma" bilgilerini paylaşmıştık.

Blogger Mobil Uyumlu YouTube Video Eklentisi

1- Blogger hesabınızda oturum açarak blogunuzun Şablon sekmesine tıklayın. Açılan sayfada HTML'yi Düzenle tıklayın. Şablon kodlarınızın bulunduğu sayfada CTRL+F yardımıyla </body> kodunu bulun ve aşağıdaki javaScript kodunu </body> kodunun bir satır üzerine ekleyin ve şablonu kaydedin. Bu kod YouTube video iframe embed kodlarının mobil cihazlar üzerinde düzenin bozulmamasını sağlayacaktır.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
$(document).ready(function() {
    $('iframe[src*="youtube.com"]').wrap('<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0 auto;width:100%"></div>');
    $('iframe[src*="youtube.com"]').css({
        "position": "absolute",
        "top": "0",
        "left": "0",
        "width": "100%",
        "height": "100%",
        "border": "0"
    });
    $('iframe[src*="youtube.com"]').each(function() {
        $(this).attr("data-src", $(this).attr("src"));
        $(this).attr("src", "")
    });
});
function init() {
    var vidDefer = document.getElementsByTagName('iframe');
    for (var i = 0; i < vidDefer.length; i++) {
        if (vidDefer[i].getAttribute('data-src')) {
            vidDefer[i].setAttribute('src', vidDefer[i].getAttribute('data-src'));
        }
    }
}
window.onload = init;
//]]>
</script>
</b:if>

NOT: Eğer video embed kodlarınızı farklı bir siteden veya sağlayıcıdan alıyorsanız; blogger.videos.com aşağıdaki javaScript kod içerisinde bulunan youtube.com adresi ile değiştirmeniz yeterli olacaktır. Sadece kod içerisinde bulunan renkli youtube.com adreslerini değiştirin. Yani 3. (üç) sırada bulunan youtube.com adresini değiştirmeyin.

2- Blogger sitesine YouTube iframe embed kodu yerleştirmek için aşağıdaki kodu kullanmanız yeterli olacaktır. Aşağıdaki koda YouTube üzerinden eklemek istediğiniz video'nun embed id kodunu aşağıdaki örnek kodda olduğu gibi ekleyerek blog sitenizde paylaşabilirsiniz.

YouTube Embed Kodu: https://youtu.be/-pUhraVG7Ow embed kodlarını video üzerine sağ tıklayarak Video URL'sini kopyala veya açtığınız video sayfasında tarayıcınızın arama kutusunda https://www.youtube.com/watch?v=-pUhraVG7Ow bu şekilde görünmektedir. URL üzerinde gördüğünüz gibi video embed id'si -pUhraVG7Ow budur.

Blogger YouTube Iframe Embed Kodu

<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0 auto;width:100%">
<iframe width="640" height="480" src="https://www.youtube.com/embed/..." frameborder="0" allowfullscreen="" data-src="https://www.youtube.com/embed/..." style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 0px;"></iframe>
</div>

Örnek Blogger YouTube Iframe Embed Kodu

<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0 auto;width:100%">
<iframe width="640" height="480" src="https://www.youtube.com/embed/-pUhraVG7Ow" frameborder="0" allowfullscreen="" data-src="https://www.youtube.com/embed/-pUhraVG7Ow" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 0px;"></iframe>
</div>

Ön İzleme

Blogger sitelerine mobil uyumlu YouTube iframe embed kodu ekleme ile ilgili yayınımız hakkında görüşleriniz için aşağıdaki yorum sitemini kullanabilirsiniz. Bize destek olmak için yayınlarımızı Google+, Facebook ve Twitter sayfalarınızda paylaşmanız yeterli olacaktır. Teşekkürler.