Halo, kembali lagi di blog ini. Postingan kali ini mengulas tentang tutorial blogger. Postingan yang diulas adalah mengenai Cara Memasang Video Youtube Responsive di Blog. Tutorial kali ini lebih dikhususkan untuk postingan blog.
Awalnya, saya mencari tutorial agar video youtube di postingan saya sebelumnya: Dreamcatcher, Girlband Korea dengan Konsep Unik menjadi responsive agar mobile friendly atau ramah untuk perangkat mobile. Namun, semua toturial yang saya temukan di page pertama hingga ketiga laman pencarian google, sama sekali membingungkan / sulit dipahami dan cara penggunaannya yang ribet. Saya pikir, hal ini dapat menambah keresahan pembaca.
Tidak terlepas dari beberapa referensi, saya mencoba dengan cara atau eksperimen saya sendiri agar video youtube menjadi responsive di postingan blog. Untuk mengetahui cara memasang video youtube responsive di blog, silakan mengikuti langkah-langkah berikut ini.
Cara Memasang Video Youtube di Blog
Cara memasang video youtube di blog cukup mudah dilakukan.
Langkah 1: Cukup klik BAGIKAN pada video youtube pilihan Anda. Setelah itu klik SEMATKAN dan salin (copy) HTML videonya. Misalkan HTML videonya adalah seperti ini
<iframe width="560" height="315" src="https://www.youtube.com/embed/FlsCjmMhFmw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Kabarnya, script HTML di atas belum SEO frendly karena menggunakan tag iframe. Agar SEO friendly, Anda boleh mengubah kode <iframe menjadi <object, mengubah src menjadi data dan mengubah </iframe> menjadi </object>. Maka keseluruhan script HTML menjadi
<object width="560" height="315" data="https://www.youtube.com/embed/FlsCjmMhFmw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></object>
Langkah 2: Tempelkan (paste) HTML videonya di postingan Anda pada mode HTML. Selesai, boleh dipublish.
Cara Agar Video Youtube Menjadi Responsive
Perhatikan bahwa ukuran width="560" dan height="315" dari HTML di atas adalah rasio lebar-tinggi standar untuk YouTube di desktop adalah 16:9, boleh hitung sendiri, nilainya 1.77:1. Nah, cara yang saya lakukan agar video youtube menjadi responsive di postingan blog adalah dengan menggunakan rasio tersebut pada settingan tampilan CSS Media Query untuk berbagai resolusi.
Langkah 3: Buka Blogger > Tema > Edit HTML. Tambahkan kode CSS berikut sebelum ]]></b:skin>.
/* Video Youtube Responsive by Blog ARS */
.post-body iframe,.post-body embed,.post-body object{max-width:100%;max-height:auto}
@media screen and (max-width:768px){.post-body iframe,.post-body embed,.post-body object{height:432px}}
@media screen and (max-width:600px){.post-body iframe,.post-body embed,.post-body object{height:337.5px}}
@media screen and (max-width:480px){.post-body iframe,.post-body embed,.post-body object{height:270px}}
@media screen and (max-width:320px){.post-body iframe,.post-body embed,.post-body object{height:180px}}
Langkah 4: Simpan Tema.
Berikut ini adalah video contohnya.
***
Semoga tutorial ini bermanfaat dan memudahkan bagi pembaca. Terima kasih.
Baca Juga Tutorial Lainnya:
