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>.

CSS/* 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>.

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

Jquery<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.

HTML<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 :

HTML<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.