Cara Responsive Memasang Video Youtube di Blog

Gelap Terang - Youtube sudah menjadi situs video paling populer saat ini. Dimana semakin hari semakin bertambah video di Youtube, karena semua orang bebas mengupload video di Youtube. Banyak kelebihan situs Youtube, salah satunya fitur embed video yang bisa kita tambahkan dan dapat di  tonton langsung di blog. Namun dengan menambahkan video di Youtube akan mengurangi nilai SEO suatu blog karena adanya elemen iframe dan tampilannya blum responsive untuk semua ukuran layar.

Maka dari disini admin akan membagikan tutorial menambahkan video Youtube responsive di blog, tidak akan mengurangi nilai SEO. Ikuti tutorialnya di bawah :

1. Buka blogger >  Template > Edit HTML > Tambahkan kode dibawah sebelum kode ]]></b:skin>

/* 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 dibawah 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. Untuk menambahkan video pada postingan, gunakan kode dibawah ini

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

 Gambar link embed video yang di ambil :

5. Contoh kode setelah penambahan link embed video

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

6. Simpan / publikasikan postingan.

Sekarang video yang terpasang di blog sudah responsive yang berarti video bisa menyesuaikan diri di layar yang berukuran berapapun.

Note : Jika anda ingin video yang Youtube yang dipasang di Blog terputar otomatis maka tinggal tambahkan kode ?rel=0&amp;autoplay=1 pada link embed. Maka link embed akan menjadi seperti ini.

//www.youtube.com/embed/tUVqnXD4C5U?rel=0&amp;autoplay=1

Sekian tutorial Cara Responsive Memasang Video Youtube di Blog, semoga bermamfaat.
Source code : Arlina Design