Cara Meresponsifkan Video Youtube pada Blog

byKurazone Net -
KURAZONE ~ Halo sahabat Kurazer, pada kesempatan kali ini saya bagikan kembali informasi mengenai tutorial blogger yang berkaitan dengan pemasangan video youtube kedalam blog, atau istilah kerennya adalah embed / semat video youtube. Untuk melakukan embed video ini kita bisa melakukan klik kanan pada video youtube yang kita buka lalu memilih copy embed code yang pernah saya bahas pada artikel "Cara Embed Video Youtube kedalam Blog".
Dalam artikel ini akan dijelaskan mengenai modifikasi lanjutan untuk video yang diembed agar terlihat reponsif atau memiliki lebar dan tinggi video sesuai dengan dimensi perangkat yang digunakan, baik via desktop maupun via mobile.
Kode dasar yang diberikan oleh Youtube adalah sebagai berikut :
<iframe width="853" height="480" src="https://www.youtube.com/embed/X6dVffF5s8c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Untuk membuatnya responsif, maka kita perlu membuat CSS khusus untuk memodifikasi tampilan videonya. 

Berikut adalah Cara Meresponsifkan Video Youtube pada Blog
1. Buka akun Blogger >> Pilih Menu Tema >> Pilih Edit HTML
2. Copy kode CSS dibawah ini, lalu letakkan (paste) diatas kode ]]></b:skin>
.ytkura {width:100%;height:380px;background:black}
@media only screen and (max-width:768px){.ytkura{width:100%;height:200px}}
@media only screen and (max-width:528px){.ytkura{width:100%;height:200px}}
@media only screen and (max-width:425px){.ytkura{width:100%;height:200px}}
@media only screen and (max-width:375px){.ytkura{width:100%;height:200px}}
@media only screen and (max-width:360px){.ytkura{width:100%;height:200px}}
@media only screen and (max-width:320px){.ytkura{width:100%;height:200px}}
3. Simpan template

Darisini kalian sudah memiliki settingan untuk meresponsifkan video youtube, selanjutnya adalah memanggil fungsi settingannya kedalam embed video.

Berikut adalah caranya :
1. Copy salah satu kode embed video youtube. Anggap saja kode dibawah ini adalah kode hasil copy embed code dari salah video dari youtube
<iframe width="853" height="480" src="https://www.youtube.com/embed/X6dVffF5s8c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
2. Letakkan kode embed didalam artikel dalam keadaan mode HTML (bukan Compose)
3. Hapus bagian width dan  height nya, lalu sisipkan class="ytkura"

SEBELUM :

<iframe width="853" height="480" src="https://www.youtube.com/embed/X6dVffF5s8c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

SESUDAH :

<iframe class="ytkura" src="https://www.youtube.com/embed/X6dVffF5s8c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
4. Publikasi artikel.

Darisini kalian sudah berhasil menerapkan settingan responsif pada video youtube yang diembed. Settingan ini berfungsi supaya video yang tampil terlihat memiliki ukuran yang pas (antara tinggi dan lebar video terlihat seimbang). Sisanya tinggal melakukan hal sama apabila kalian ingin mengembed video youtube lagi.

Itulah informasi mengenai "Cara Meresponsifkan Video Youtube pada Blog", selamat mencoba dan semoga bermanfaat. Goodluck!

DEMO : 

(silakan lihat video dibawah ini via desktop dan mobile untuk melihat perbedaan responsifnya)


Tags





أحدث أقدم