Cara Terbaru Memasang Video Youtube Responsive di Blog

Cara Terbaru Memasang Video Youtube Responsive di Blog - Youtube merupakan sebuah situs berbagi video paling populer saat ini, dimana sobat bisa mengupload video, menonton video, atau bisa juga untuk mendapatkan penghasilan dari youtube dengan mendaftarkan akun adsense melalui youtube.

Banyak kelebihan yang ditawarkan situs youtube ini, salah satunya adalah fitur embed video yang bisa sobat tambahkan dan dapat ditonton langsung di blog. Namun dengan menambahkan video tersebut akan mengurangi nilai SEO sebuah blog karena adanya elemen iframe dan tampilannya pun belum responsive jika ukuran layar diperkecil.

Oleh sebab itu, saya akan memberikan sebuah tips agar video youtube menjadi responsive dan tidak akan mengurangi nilai SEO blog sobat. Bagaimana? apakah sobat penasaran ingin memasang video youtube yang responsive diblog? Berikut cara penerapannya:

1. Buka Blogger > Template > Edit HTML > Tambahkan kode di bawah ini sebelum ]]></b:skin> atau </style>

/* Youtube Responsive */
.videoyoutube{text-align:center;margin:auto;width:100%;}
.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0} 

2. Tambahkan kode di bawah ini sebelum </body>

<script type='text/javascript'>
//<![CDATA[
// Youtube Responsive
setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
//]]>
</script> 

3. Simpan template.

4. Selanjutnya untuk menambahkan video pada postingan, gunakan kode di bawah ini:

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

Contoh link embed video yang diambil:

Salin link embed seperti screenshot di atas, kemudian simpan di dalam kode HTML di atas seperti ini:

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/31k_DB8KVQM">
</div>
</div>
</div>

5. Terakhir simpan / publikasikan postingan.

Update: Use CSS Only

Selain menggunakan cara diatas, untuk membuat video youtube lebih responsive sobat juga bisa memanfaatkan media query sebagai alat untuk membuat video youtube lebih responsive. Hanya dengan CSS media query sobat tidak perlu repot lagi untuk mengatur apapun, karna telah otomatis.

Bagi yang ingin mengganti hanya dengan menambahkan CSS saja, sobat bisa pasang kode di bawah ini:

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

Atur kembali CSS max-height dalam media query jika kurang sesuai.

Kini video youtube yang diembed di postingan sudah responsive yang berarti video bisa menyesuaikan dengan ukuran dalam layar apapun. Sekian sedikit trik tentang Cara Terbaru Memasang Video Youtube Responsive di Blog. Semoga bermanfaat.

sumber: arlina design