Embed Youtube Video Responsive

Diposting pada 9 views
Embed Youtube Video Responsive – Bagaimana cara menyematkan “embed” video youtube ke website biar responsive?, Pada dasarnya code embed “iframe” video youtube sudah sangat responsive di banyak ukuran layar, namun masalahnya jikalau memakai arahan default youtube embed biasanya akan terlihat space atau black kafe diatas dan dibawah video jikalau dilihat pada layar yang lebih kecil menyerupai mobile device.

 video youtube ke website biar responsive Embed Youtube Video Responsive
JQuery for youtube iframe (Responsive & Allow full screen

Nah untuk mengatasi hal tersebut aku akan membagikan sebuah campuran 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” biar video tidak diputar secara otomatis sehingga menjadi menyerupai 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 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 ihwal 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 bahu-membahu kedua script / javascript defer iframe dan jquery iframe reponsive ini sanggup dipadukan menjadi satu dengan 2 fungsi ialah 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 ihwal coding dan blogging, hingga jumpa kembali dan terimakasih atas kunjungannya.