Cara Lengkap Memasang Video YouTube Responsive di Blog

Salah satu fitur di blogger yaitu kita bisa menambahkan video youtube dengan memasukkan embed video tersebut. Fitur ini sering digunakan oleh blog tutorial, supaya tutor yang diberikan lebih jelas dan mudah dimengerti. Namun kekurangannya yaitu artikel jadi tidak seo, karena video tersebut berupa iframe yang mana bisa membuat loading menjadi lama (merugikan).

Cara Memasang Video YouTube Responsive di Blog

Nah ada cara khusus agar video youtube tersebut menjadi lebih responsive dan tidak berdampak buruk terhadap seo artikel yaitu dengan cara menambahkan CSS khusus untuk memasang video youtube responsive di blog. Jika Anda penasaran, berikut cara membuat video youtube responsive di blog

Pertama, silahkan simpan kode dibawah ini tepat diatas (sebelum) kode ]]></b:skin> atau </style>

/* 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}}

Selanjutnya untuk menambahkan video youtube responsive, gunakan kode dibawah ini pada saat menulis artikel

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="LINK EMBED">
</div>
</div>
</div>

Ganti LINK EMBED dengan link embed video youtube yang ingin Anda pasang. Lihat cara dibawah ini untuk mengambil link embed video youtube

Cara Mencari Embed Video YouTube

1. Buka video yang ingin ditambahkan, lalu klik tombol Bagikan yang biasanya berada dibawah video

2. Klik Sematkan

3. Salin link yang berada diantara tanda kutip, contohnya seperti yang dikasih garis merah digambar ini

4. Salin link tersebut lalu masukkan ke script diatas tadi

Cara Menambahkan Script Pemanggilan Video YouTube Responsive

Bila Anda masih bingung bagaimana cara menambahkan video youtube responsive di blog, silahkan ikuti langkah - langkah dibawah ini.

1. Buat postingan seperti biasa

2. Ganti Compose menjadi HTML (di sudut kiri atas)

3. Masukkan script pemanggilan yang telah Saya bagikan diatas (lihat gambar dibawah ini)

4. Terakhir ganti LINK EMBED dengan embed video youtube yang telah Anda salin seperti cara diatas tadi.

Maka hasil akhirnya seperti ini

Jadi itulah cara memasang atau menambahkan video youtube responsive di blog. Mungkin sekian yang bisa Saya sampaikan kali ini, semoga bermanfaat