Tips SEO Terbaik

Memasang Video Responsive di Blog Hanya dengan CSS

Memasang Video Responsive di Blog Hanya dengan CSS

Mengambil embed video langsung dari Youtube dan dipasang apa adanya ke blog (blogspot) merupakan cara termudah untuk menampilkan video tersebut di blog.

Tapi sayangnya pemasangan embed video secara langsung ini menyebabkan tampilan secara mobile akan terpotong, karena iframe video tersebut ternyata tidak mendukung desain yang responsive alias mobile friendly. Untuk membuktikan hal ini, Anda bisa mencobanya sendiri.

Kebanyakan panduan yang diberikan untuk membuat video menjadi responsive menggunakan gabungan script dari javascript, CSS dan html.

Untuk blogger yang kurang begitu paham dengan script, tentu saja ini cukup merepotkan.
Meskipun ada juga yang hanya memakai script CS, namun ternyata tetap harus melakukan perubahan pada kode htmlnya, sehingga mau tidak mau jika embed video sudah terpasang, harus diedit satu persatu.

Selain itu, pemakain kode javascript yang terlalu banyak sebaiknya dihindarkan (ini menurut para Master SEO), salah satunya karena bisa menambah berat beban loading blog.


Jika hanya beberapa video yang ada di blog mungkin tidak masalah, tapi jika banyak tentu saja sangat menyita waktu alias merepotkan.

cara mudah memasang video youtube responsive
Nah, di artikel kali ini Saya akan memberikan tips pemasangan embed video youtube (yang menggunakan Iframe tentunya) menjadi responsive hanya dengan memasang beberapa baris script CSS dengan tanpa melakukan editing lagi pada setiap kode embed yang telah terpasang.

# Langkah pertama masuk ke dashboard blogspot Anda dan langsung menuju ke HTML template.
# Langkah kedua cari kode berikut : ]]></b:skin>
# Langkah Ketiga Letakkan kode berikut tepat di bawah kode di atas.
<style>
/* iframe video CSS Only */
.post-body iframe{width:100%!important;}
@media screen and (max-width:960px){
.post-body iframe{max-height:90%}}
@media screen and (max-width:768px){
.post-body iframe{max-height:75%}}
@media screen and (max-width:600px){
.post-body iframe{max-height:60%}}
@media screen and (max-width:480px){
.post-body iframe{height:auto!important;max-height:auto!important}}
</style>
# Langkah Terakhir Kemudian simpan Template Anda.

Coba periksa lagi video yang terpasang di posting blog Anda melalui layar HP, seharusnya jika pemasangan benar, hasilnya, video tersebut akan mobile friendly. Semoga bermanfaat

SUMBER SCRIPT

Share this:

Enter your email address to get update from Tips SEO Terbaik.

No comments