Coding

Agar Embed Video YouTube Menjadi Responsif

Dalam beberapa kasus, embed video Youtube ke situsweb seringkali terkendala masalah ukuran video yang tidak responsif. Hal ini menyebabkan tampilan video saat diakses melalui ponsel cerdas menjadi tidak nyaman dilihat (keluar batas lebar halaman web). Hal seperti ini kadang mengganggu pembaca.

Berikut adalah contoh tampilan yang tidak responsif:

Frame video tampak keluar dari kontainer
Frame video tampak keluar dari kontainer

Lalu bagaimana cara mengatasinya? Secara umum, kode embed yang diperoleh dari Youtube adalah markup default yang bisa kita modifikasi tampilannya. Untuk itu, kita hanya perlu menambahkan kode CSS – dengan menambahkan kelas – agar frame video dari Youtube bisa menyesuaikan ukuran kontainer halaman web.

Kode embed Youtube asli:

<iframe src="https://www.youtube.com/embed/3c_McS4_2A8?rel=0" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Kode embed Youtube setelah ditambah kelas baru:

<div class="responsive-embed-youtube"><iframe src="https://www.youtube.com/embed/3c_McS4_2A8?rel=0" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

Kode CSS untuk class “responsive-embed-youtube” (ditambahkan lewat editor dengan edit style.css):

.responsive-embed-youtube {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
}
.responsive-embed-youtube iframe, .responsive-embed-youtube object, .responsive-embed-youtube embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
right:10px;
}
Hasil tampilan setelah mengedit kode CSS
Hasil tampilan setelah mengedit kode CSS

Saya telah mencoba trik ini pada beberapa theme WordPress dan berhasil. Namun, tidak menutup kemungkinan trik ini dapat diimplementasikan ke dalam tampilan web yang lain.

Selamat mencoba.

  • Thx, gan. Nanti saya coba tipsnya…

  • masnur

    kalo yang untuk di blogspot bagaimana kodenya?
    Apakah kode tersbeut bisa juga untuk diterapkan jika kita mau melampirkan (embed) peta (google maps)
    Mohon penjelasan.
    terima kasih

  • mas, thumbnail biar hd gimna yaaa..

  • entergoal

    Maaf gan. Kalau untuk google drive ada solusinya biar bisa responsive gak ya gan? Soalnya ane nyari di mbah gugel tentang google drive kaga ada. Btw, tips yang agan kasih ini udah ane coba di web ane. Scriptnya work toh. Thanks gan.

  • trima kasih panduanya, akhirnya sukses di blogku