Cara Terbaru Memasang Video Youtube Responsive di Blog

Dengan membuat video youtube yang awalnya tidak responsive menjadi responsive ternyata cukup mudah, kita perlu menambahkan pengaturan di css mengubah iframe , video dan embed dengan width 100% , karena ukuran persenlah inti dari responsive.

Seperti yang kita tahu bahwa iframe itu tidak baik untuk seo , kalau kita masang video youtube cuma mengambil script iframenya doank , tanpa di modifikasi sama sekali , meskipun itu simple dan mudah sekali tapi mau blog anda kurang SEO.

Berikut cara membuat youtube menjadi responsive dan tidak mengurangi nilai SEO :
01. Tambahkan kode dibawah ini 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}

02. Tambahkan kode dibawah ini sebelum kode </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>

03. Simpan template
04. Tambahkan kode dibawah ini pada postingan anda di HTML bukan Compose

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

05. Simpan dan Publikasi postingan anda.