Juli 10, 2016

Cara Memasang Video Youtube Responsive di Blog

Cara Memasang Video Youtube Responsive di Blog - Tips Blogger, Youtube adalah situs berbagi video yang sangat populer sampai saat ini, kalian juga bisa mengupload video, menonton video, atau kalian juga bisa menghasilkan uang dari 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.

Ada dua metode yang bisa kalian terapkan untuk Video Youtube menjadi responsive, dengan html atau hanya dengan css saja. Kalian bisa pilih salah satu metode dibawah ini.

Berikut Cara Memasang Video Youtub Responsive di Blog


1. Dengan CSS


Kalian bisa langsung embed kode video youtube, akan langsung menjadi responsive. Jika ukuranya tidak pas, silahkan atur kembali height dan windth nya.

1. Buka Blogger > Template > Masukkan kode dibawah ini tepat sebelum kode ]]></b:skin> atau </style>.
/* Youtube Responsive 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}}

2. Dengan HTML


1. Buka Blogger > Template > Masukkan kode dibawah ini tepat sebelum kode ]]></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 dibawah ini sebelum
<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 dalam postingan, tambahkan kode dibawah 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 embed video yang diambil dari youtube :

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/Y3TcAh-fk3c">
</div>
</div>
</div>
Semoga Cara Memasang Video Youtube Responsive di Blog, terima kasih.

4 komentar:

  1. Keren juga ya wajib di coba nih siapa tahu bisa populer blog sayanya.

    BalasHapus
  2. blog saya udah ada embed video youtube bawaan template mas, tapi bagus mas

    BalasHapus
  3. jadi ga bagus untuk seo ya mas?

    Makanya saya jarang pasang video youtube lagi, paling tak kasi link yang tidak aktif saja ke youtubenya..

    BalasHapus

Ada yang bingung? tanyain aja disini ^^