Embed Youtube Video Responsive
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 kalau memakai isyarat default youtube embed biasanya akan terlihat space atau black kafe diatas dan dibawah video kalau dilihat pada layar yang lebih kecil ibarat mobile device.
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.
Copy dan simpan isyarat 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 isyarat jquery pada area body atau tag </body> didalam html situs maka isyarat default embed youtube sanggup di pasang didalam post (postingan) tanpa merubah isyarat semat "embed" tersebut, namun sebaiknya fitur autoplay video dihilangkan terlebih dahulu, berikut contohnya;
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 memperlihatkan 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 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 perihal coding dan blogging, hingga jumpa kembali dan terimakasih atas kunjungannya.
 |
| JQuery for youtube iframe (Responsive & Allow full screen |
<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 isyarat 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 isyarat jquery pada area body atau tag </body> didalam html situs maka isyarat default embed youtube sanggup di pasang didalam post (postingan) tanpa merubah isyarat 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 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 isyarat emebed youtube tidak perlu di rubah sebab 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 memperlihatkan 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 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 perihal coding dan blogging, hingga jumpa kembali dan terimakasih atas kunjungannya.
