Embed Youtube Video Responsive

Embed Youtube Video Responsive - Bagaimana cara menyematkan "embed" video youtube ke website supaya responsive?, Pada dasarnya code embed "iframe" video youtube sudah sangat responsive di banyak ukuran layar, namun masalahnya kalau memakai arahan default youtube embed biasanya akan terlihat space atau black kafe diatas dan dibawah video kalau dilihat pada layar yang lebih kecil ibarat mobile device.

JQuery for youtube iframe (Responsive & Allow full screen

Nah untuk mengatasi hal tersebut aku akan membagikan sebuah adonan sederhana antara javascript, jquery, htlm dan css yang berfungsi untuk menghilangkan space atau black kafe dan menciptakan tampilan iframe video youtube menjadi lebih responsive dikala disematkan "embed" pada laman web. Berikut kode jquery embed youtube responsive nya.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    $('iframe[src*="youtube.com"]').css({"width": "100%","height": "100%","position": "absolute","top": "0","left": "0"});
    $('iframe[src*="youtube.com"]')
    .wrap('<div style="height:0;width:100%;position:relative;margin:0 auto;padding-bottom:56.25%;overflow:hidden"></div>');
    $('iframe[src*="youtube.com"]').each(function() {
        $(this).attr("src")
    });
});
//]]>
</script>

Copy dan simpan arahan jquery embed youtube responsive tersebut sempurna diatas tag </body>  pada html situs web anda. script/jquery akan mengatur dan menyesuaikan iframe video youtube dengan cepat tanpa menyisakan space atau blak kafe diatas dan dibawah vodeo youtube.

Untuk penggunaan nya sangat sederhana, sehabis menyimpan arahan jquery pada area body atau tag </body> didalam html situs maka arahan default embed youtube sanggup di pasang didalam post (postingan) tanpa merubah arahan semat "embed" tersebut, namun sebaiknya fitur autoplay video dihilangkan terlebih dahulu, berikut contohnya;

Kode default embed youtube

<iframe width="854" height="480" src="https://www.youtube.com/embed/Wwl1ZuLG80o" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Kemudian hapus allow="autoplay; encrypted-media" supaya video tidak diputar secara otomatis sehingga menjadi ibarat dibawah ini;

<iframe width="854" height="480" src="https://www.youtube.com/embed/Wwl1ZuLG80o" frameborder="0" allowfullscreen></iframe>

Setelan lebar dan tinggi iframe video pada arahan emebed youtube tidak perlu di rubah alasannya ialah jquery akan mengatur tampilan iframe video youtube dengan sangat responsible. Lihat demo-nya pada video dibawah ini;
Display atau tampilan iframe video diatas sudah meggunakan jquery untuk mengatur ke responsipan nya, sehingga tidak ada black kafe (baris spasi hitam) terlihat diatas maupun dibawah video. Beberapa waktu kemudian aku telah menulis perihal cara "defer" menunda pemutan iframe video youtube, pada artikel tersebut aku sengaja tidak memakai jquery iframe responsive ini untuk mengatakan perbedaan dikala memakai jquery iframe responsive dan memakai teknik defer iframe [Chek Here], meskipun sesungguhnya kedua script / javascript defer iframe dan jquery iframe reponsive ini sanggup dipadukan menjadi satu dengan 2 fungsi yaitu display & speedup.

Demikian tutorial cara memmbuat iframe youtube responsive dan 100% full screen, Semoga script "Embed youtube video responsive" ini bermanfaat dan menambah ilmu pengetahuan kita perihal coding dan blogging, hingga jumpa kembali dan terimakasih atas kunjungannya.