Memberi lebar atau width 100% tidak menyelesaikan masalah, karena tingginya tidak mengikuti secara proporsional yang membuat tampilannya video Youtube yang dipasang menjadi lebih tidak sedap lagi. Oleh sebab itu mesti ada cara lain untuk membuat embed Iframe Video Youtube Responsive 100% Width dengan tinggi yang proporsional mengikuti.
Tips membuat tampilan video Youtube menjadi responsive saya peroleh di tulisan ini, dan merasa perlu untuk menulisnya sebagai rujukan pribadi ketika suatu saat nanti diperlukan lagi, dan lupa caranya, selain mungkin bisa bermanfaat bagi orang lain.
Kode embed iframe video Youtube yang lazim diletakkan di dalam tulisan adalah
<iframe width="560" height="315" src="https://www.youtube.com/embed/f6Bo07pdBs0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>, dimana orang bisa memilih lebar dan tinggi yang tetap.
Untuk membuatnya menjadi responsive, maka script embed iframe Youtube diletakkan di dalam container, menjadi
<div class="videoWrapper"><iframe src="//www.youtube.com/embed/yCOY82UdFrw"
frameborder="0" allowfullscreen class="video"></iframe></div>. Selanjutnya adalah membuat css untuk mengatur lebar dan tinggi embed iframe video.
Elemen tinggi atau height pada kontainer diberi angka nol, dengan persentase tertentu untuk padding bawah yang merupakan persentase dari lebar kontainer untuk memberikan aspek rasio lebar dan tinggi yang tetap. Untuk itu perlu dibuat container relatif dan iframe absolut, yang diletakkan di dalam div.
Kode css-nya adalah sebagai berikut :
.videoWrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}Cara ini bukan saja memberikan efek penampilan video dengan lebar dan tinggi responsive pada desktop, namun juga memberikan hasil yang sama ketika dibuka dengan mobile phone.
Meski persoalan bagaimana cara membuat embed iframe Video Youtube Responsive 100% Width ini sudah teratasi, namun ada satu hal lagi yang masih perlu dipecahkan, yaitu bagaimana caranya agar pemasangan embed iframe video Youtube tidak memperlambat loading halaman dan berpengaruh buruk pada SEO.
Tipsnya bisa dibaca pada tulisan Defer Parsing Video Youtube untuk Mempercepat Loading di Blogger. Permisi ...Diubah: Oktober 11, 2021.
Label: Blogger, Inspirasi, Tutorial, Youtube
Bagikan ke: WhatsApp, Email. Print!.
