Pasang Video YouTube di Blog Jadi Responsive,Valid HTML5 dan Seo Friendly

Pasang Video YouTube di Blog Jadi Responsive,Valid HTML5 dan Seo Friendly

Sobat bloggers, bagi Anda yang suka posting video dari YouTube di blog silahkan Anda ikuti tips di bawah ini.

Cara Pasang Video YouTube di Blog Jadi Responsive,Valid HTML5 dan Seo Friendly :

1. Copy kode CSS di bawah ini dan tempatkan tepat di atas ]]></b:skin> atau </style>

 .videoyoutube{
    text-align: center;
    background:linear-gradient(to bottom, #fefefe 0%, #d1d1d1 100%);
    border:1px solid #A8A8A8;
    border-radius:5px;
    margin:20px auto;
    width:80%;
    box-shadow: 1px 30px 30px -26px #818181;
}
.video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin:8px;
}
.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border:0;
} 

2. Simpan kode javascript iframe loader video Youtube di bawah ini DI ATAS kode </body>

 <script type='text/javascript'>
//<![CDATA[
setTimeout(function(){
$('.video-youtube').each(function(){
$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data('src')+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5000);
//]]>
</script> 

3. Untuk memasang video di posting blog, silahkan  copy kode ini dan taruh pada mode "HTML"

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

4. Selamat mencoba , semoga berhasil !!



 terakhir, berikut ini video amatir meletusnya Gunung Kelud :



Sekian artikel Pasang Video YouTube di Blog Jadi Responsive,Valid HTML5 dan Seo Friendly