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.

1 comment

saya sangat berterima kasih banyak MBAH RAWA GUMPALA atas bantuan pesugihan dana ghaib nya kini kehidupan kami sekeluarga sudah jauh lebih baik dari sebelumnya,ternyata apa yang tertulis didalam blok MBAH RAWA GUMPALA itu semuanya benar benar terbukti dan saya adalah salah satunya orang yang sudah membuktikannya sendiri,usaha yang dulunya bangkrut kini alhamdulillah sekaran sudah mulai bangkit lagi itu semua berkat bantuan beliau,saya tidak pernah menyangka kalau saya sudah bisa sesukses ini dan kami sekeluarga tidak akan pernah melupakan kebaikan MBAH,,bagi anda yang ingin dibantu sama MBAH RAWA GUMPALA silahkan hubungi MBAH di 085 316 106 111 insya allah beliau akan membantu anda dengan senang hati,pesugihan ini tanpa resiko apapun dan untuk lebih jelasnya buka saja blok mbah
BUKA PESUGIHAN PUTIH TAMPA TUMBAL