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.
# 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># Langkah Terakhir Kemudian simpan Template Anda.
/* 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>
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
0 comments