YouTube Videolar gömülmesi için Better <RageUnseen>

RageUnseen

Kadim Üye
29 Ağu 2015
6,713
1
İstanbul
Bir YouTube video embed kolaydır lakin gömülü YouTube video web sayfalarına ekleyebileceği ne kadar ekstra ağırlık olabilceğine şaşıracaksınız. tarayıcı tek başına YouTube video oynatıcı render için (ekran görüntüsü) ekstra JavaScript dosyaları yarım Mb hakkında indirmek zorundadır. Ziyaretçi gömülü video oynatsa bile Ve bu dosyalar indirilir.

youtube-embed-video-size.png


Gömülü video sadece web sayfalarının bayt boyutunu artırır ancak tarayıcı video oynatıcı işlemek için birden çok HTTP isteklerini yapmak zorundadır. Bu nedenle etkileyen sayfanızın genel yükleme süresi hız puanı artar . Varsayılan YouTube embed kodu ile diğer dezavantajı olmadığıdır. Insanlar bir cep telefonu üzerinde web sitesi görünümünde, video oynatıcı, küçük ekran için yeniden düzgün boyutlandırmak olmayabilir.

Işık ve Duyarlı YouTube gömer

YouTube için standart Kodu IFRAME etiketi ve video oynatıcı genişlik ve yükseklik sabit kodlanmış oyuncu olmayan duyarlı hale böylece vardır kullanır.

YouTube için yeni on-demand embed kodu biraz farklıdır. Duyarlı olarak videoyu katıştırma gibi oyuncu boyutu belirtmek gerekmez. Ayrıca, IFRAME bir DIV etiketi ile değiştirilir ve IFRAME ziyaretçi play butonuna tıkladığında sadece sayfaya eklenir.

youtube-embed-code.png


Responsively Embed YouTube Videoları - Öğretici

YouTube video görünmesini istediğiniz yere web sayfasında herhangi bir yere aşağıdaki pasajını kopyalama yapıştırın. YouTube videosunun gerçek kimliği ile VIDEO_ID değiştirmeyi unutmayın.

Kod:
<div class = "youtube-oyuncu" veri id = "VIDEO_ID" > </ div>
Biz yüksekliği otomatik olarak hesaplanır iken otomatik olarak ana genişliğini işgal edecek video oynatıcı beri yüksekliğini ve genişliğini atamaz. Aynı sayfada birden fazla embed videoları gerekiyorsa farklı video kimlikleri ile çoklu DIV blokları yapıştırabilirsiniz.

Ardından, web şablonu herhangi JavaScript yerleştirin. Bir web sayfasına gömülü tüm videoları bulur ve daha sonra video küçük div elemanları değiştirir.

Kod:
<Script>
 
    / * Işık YouTube * / @labnol tarafından Embeds
    / * Web: http://labnol.org/?p=27941 * /
 
    belge . addEventListener ( "DOMContentLoaded" ,
        fonksiyonu () { 
            var div , n ,
                v = belge . getElementsByClassName ( "youtube-oyuncu" );
            için ( n = 0 ; n < h . uzunluğu ; n ++) {   
                div = belge . createElement ( "div" );
                div . setAttribute ( "data-id" , v [ n ]. veri seti . id );
                div . innerHTML = labnolThumb ( v [ n ]. veri seti . id );
                div . onclick = labnolIframe ;
                v [ n ]. appendChild ( div );
            }
        });
 
    Fonksiyon labnolThumb ( id ) { 
        var başparmak = '<img src = "https://i.ytimg.com/vi/ID/hqdefault.jpg">' , 
            oynamak = '<div class = "oyun"> </ div>' ; 
        dönmek başparmak . değiştirin ( "ID" , id ) + oyun ; 
    }
 
    fonksiyonu labnolIframe () { 
        var iframe = belge . createElement ( "iframe" );
        var embed = "https://www.youtube.com/embed/ID?autoplay=1" ; 
        iframe . setAttribute ( "src" , embed . değiştirin ( "ID" , bu . veri seti . id )); 
        iframe . setAttribute ( "frameborder" , "0" ); 
        iframe . setAttribute ( "allowfullscreen" , "1" ); 
        Bu . parentNode . replaceChild ( iframe , bu ); 
    }
 
</ Script>
Son olarak, web şablon head kapanış etiketinden önce CSS yapıştırın.


Kod:
*********
    . Youtube - Oyuncu {
        pozisyon : bağıl ;
        dolgu - alt : 56.23 %; 
        / * 4 75% kullanın: 3 videolar * /
        Yükseklik : 0 ; 
        taşma : gizli ;
        max - genişlik : 100 %; 
        background : # 000; 
        margin : 5px ; 
    }
    
    . Youtube - oyuncu iframe {
        pozisyon : absolute ;
        Üst : 0 ; 
        Sol : 0 ; 
        genişliği : 100 %; 
        Yükseklik : 100 %; 
        z - index : 100 ; 
        Arka plan : şeffaf ;
    }
    
    . Youtube - oyuncu img {
        alt : 0 ; 
        Ekran : block ;
        Sol : 0 ; 
        margin : auto ; 
        max - genişlik : 100 %; 
        genişliği : 100 %; 
        pozisyon : absolute ;
        Sağ : 0 ; 
        Üst : 0 ; 
        Sınır : none ;
        Yükseklik : auto ; 
        İmleç : işaretçi ;
        - Webkit - Geçiş : . 4s bütün ; 
        - Moz - Geçiş : . 4S bütün ; 
        Geçiş : . 4s bütün ; 
    }
    
    . Youtube - oyuncu img : hover {
        - Webkit - filtre : parlaklık ( 75 %);
    }
    
    . Youtube - oyuncu . Oynamak {
        Yükseklik : 72px ; 
        genişlik : 72px ; 
        Sol : 50 %; 
        Üst : 50 %; 
        margin - sol : - 36px ; 
        margin - top : - 36px ; 
        pozisyon : absolute ;
        Arka plan : url ( "//i.imgur.com/TxzC70f.png" ) hayır - tekrar ; 
        İmleç : işaretçi ;
    }
 
</ Style>

Bir kullanıcı etkileşimi tarafından başlatılan zaman iPhone ve Android Chrome ve Safari tarayıcıları sadece HTML5 video oynatmaya izin verir unutmayın lütfen. Onlar hücresel ağlar üzerinden istenmeyen siteleri engellemek için otomatik çalma ortamı gömülü bloke etmektedir.


ÇEVRİLDİ
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.