Memasang video youtube di blog / website kadang mengalami masalah dengan tampilan video yang tidak penuh. Hal ini sering terjadi pada tampilan mobile atau jika dibuka menggunakan ponsel / tablet. Jika di komputer embed / iframe video youtube tampil sempurna, tapi pada ponsel video youtube terpotong atau hanya tampil setengahnya. Artinya pemasangan video tidak responsif mendukung tampilan PC dan mobile. Akibatnya video yang dimainkan hanya tampil sebagian (lihat juga jenis video dari internet). Tidak bisa ditampilkan full screen bahkan tidak ada setting atau pengaturan karena kontrolnya tidak muncul.
Video terpotong atau tampil sebagian ini masalahnya ada pada CSS atau style tampilan dari tema website. Kadang developer theme tidak menambahkan CSS untuk iframe / embed video. Tidak jarang pula penggunanya yang tidak tahu cara memakai kode yang tepat untuk iframe video, bahkan jika themenya sudah mendukung video responsif. Nah untuk mengatasi tampilan video youtube terpotong ini Anda bisa menambahkan CSS tambahan supaya video tampil responsif. Lebih dari itu pula saya akan menambahkan cara pasang video youtube yang tepat, video mendukung lazy load, lolos best practices serta lolos Accessibility dari Lighthouse.
Kode CSS Supaya Video Youtube Tampil Responsif
Youtube atau website penyedia video lainnya pada dasarnya menyediakan kode standar untuk iframe / embed secara umum. Kode yang disediakan ini sifatnya standar tidak memperhatikan apakah tema / template website responsif. Intinya, yang penting video muncul saja. Demikian pula tidak memperhatikan valid tidaknya html 5 dan lainnya. Berikut kode standar iframe video youtube:
<iframe width="560" height="315" src="https://www.youtube.com/embed/qX-JxoN6cAs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Seperti yang terlihat pada gambar, tampilan video terpotong dengan hanya menggunakan kode tadi. Dengan kode html standar di atas memang video bisa tampil pada website / blog, tapi kode tersebut belum memenuhi standar responsif. Sehingga wajar jika video tampil sempurna pada komputer tapi terpotong atau tampil sebagian pada ponsel mobile. Nah untuk mengatasi ini silahkan tambahkan kode berikut pada CSS atau style tema template Anda. Pengguna wordpress dari dashboard admin bisa masuk ke Tampilan / Appearance -> Theme Editor lalu cari Style.CSS lalu tambahkan kode berikut. Pengguna CMS lain seperti blogger, drupal, joomla juga bisa karena kode ini berlaku universal.
.wadah-video {
position:relative;
padding-bottom: 56.25%;
padding-top:30px;
height: 0;
overflow: hidden;
}
/* finderonly.net iframe youtube responsively*/
.wadah-video iframe, .wadah-video object, .wadah-video embed {
position:absolute;
top: 0;
left: 0;
width:100%;
height: 100%;
}
.wadah-video iframe {border:0}
Setelah itu panggil kode class CSS dan tambahkan pada iframe youtube, sehingga menjadi seperti ini:
<div class="wadah-video">
<iframe loading="lazy" title="Instal E-Learning Madrasah Online ke Hosting" width="560" height="315" src="https://www.youtube.com/embed/qX-JxoN6cAs" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
Hasil akhirnya nanti video youtube akan tampil sempurna dan tidak akan terpotong atau tampil sebagian. Perhatikan gambar di atas bagian kanan “sesudah” menggunakan kode. Tampilan iframe video youtube tampil sempurna baik di mobile ponsel ataupun PC, karena sudah responsif.
Lihat juga: Dapatkan Youtube Premium Gratis / Murah
Cara Pasang Galeri Channel YouTube di Website
Iframe Video Youtube Lolos Audit Lighthouse
Kelebihan lain dari kode iframe video Youtube di atas adalah sudah lolos audit Lighthouse. Lighthouse adalah generasi bagu pengganti pagespeed google yang terintegrasi pada browser chrome. Lighthouse sendiri memiliki 5 penilaian utama yaitu Performance, Accessibility, Best Practices, SEO dan Progresive Web App. Nah dengan kode di atas sudah lolos audit lighthouse dengan beberapa poin berikut:
- loading=”lazy”, ini adalah cara untuk meloloskan audit “Defer Offscreen Image / Video”. Kode HTML loading=”lazy” ini memang baru dan didukung browser terbaru, ke depannya akan menjadi standar. Dengan demikian tidak perlu lagi memakai script atau plugin lazy loading lagi. Lihat pula cara menambah kode lazy loading avatar wordpress tanpa plugin agar loading blog lebih cepat.
- Penambahan “title” diperlukan supaya lolos audit Accessibility. Jadi tambahkan title sesuai isi videonya ya…
- Frameborder dihilangkan, perhatikan beda kode standar iframe dengan kode yang sudah disempurnakan. Ada yang ditambah dan dan dibuang kan ya? Nah frameborder sekarang dihilangkan, kenapa? Karena frameborder tidak lolos validasi HTML5. Sebagai gantinya bisa menggunakan CSS, dan sudah saya tambahkan di atas
