3 Comment
A+ A-

Embed Youtube Video Responsive - Bagaimana cara menyematkan "embed" video youtube ke website agar responsive?, Pada dasarnya code embed "iframe" video youtube sudah sangat responsive di banyak ukuran layar, namun masalahnya jika menggunakan kode default youtube embed biasanya akan terlihat space atau black bar diatas dan dibawah video jika dilihat pada layar yang lebih kecil seperti mobile device.
Jquery embed youtube responsive
JQuery for youtube iframe (Responsive & Allow full screen
Nah untuk mengatasi hal tersebut saya akan membagikan sebuah gabungan sederhana antara javascript, jquery, htlm dan css yang berfungsi untuk menghilangkan space atau black bar dan membuat tampilan iframe video youtube menjadi lebih responsive ketika 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 kode jquery embed youtube responsive tersebut tepat diatas tag </body>  pada html situs web anda. script/jquery akan mengatur dan menyesuaikan iframe video youtube dengan cepat tanpa menyisakan space atau blak bar diatas dan dibawah vodeo youtube.

Untuk penggunaan nya sangat sederhana, setelah menyimpan kode jquery pada area body atau tag </body> didalam html situs maka kode default embed youtube dapat di pasang didalam post (postingan) tanpa merubah kode 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" agar video tidak diputar secara otomatis sehingga menjadi seperti 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 kode emebed youtube tidak perlu di rubah karena 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 bar (baris spasi hitam) terlihat diatas maupun dibawah video. Beberapa waktu lalu saya telah menulis tentang cara "defer" menunda pemutan iframe video youtube, pada artikel tersebut saya sengaja tidak menggunakan jquery iframe responsive ini untuk memperlihatkan perbedaan ketika menggunakan jquery iframe responsive dan menggunakan teknik defer iframe [Chek Here], meskipun sebenarnya kedua script / javascript defer iframe dan jquery iframe reponsive ini dapat 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 tentang coding dan blogging, sampai jumpa kembali dan terimakasih atas kunjungannya. 

Post a Comment Subscribe

  1. Mas mau tanya, saya punya 2 situs blog, di satu situs script youtube responsive nya bekerja dengan baik tapi di situs yang ke dua script hanya berfungsi untuk responsive tapi tidak menghilangkan balck bar, Bagaimana solusinya?

    ReplyDelete
    Replies
    1. Jika sebelunya pada template sudah terdapat setting youtube responsive, silahkan hapus terlebih dahulu kemudian pasang script youtube responsive yang saya bagikan pada tutorial diatas.

      Delete
  2. Nice post.. Thanks for your script embed youtube responsive

    ReplyDelete

Note: Subscribe terlebih dahulu untuk memposting komentar, Kami akan segera kembali untuk meninjau dan menanggapi respon dari anda.

Top