Skip to content Skip to sidebar Skip to footer

Cara Responsive Memasang Video Youtube di Blog | Media Maju

cara responsive memasang video youtube

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 menurut disini admin akan membagikan tutorial menambahkan video Youtube responsive pada 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 dalam 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 :

Dimanakah Letak Singgasana Iblis ?

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 telah responsive yang berarti video mampu beradaptasi pada layar yg 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

Post a Comment for "Cara Responsive Memasang Video Youtube di Blog | Media Maju"