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

Kode Iklan Di Sini
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> 

Silahkan Anda ganti URL embed videonya dengan URL embed video yang Anda ingin tampilkan.

4. Selamat mencoba , semoga berhasil !!

Pastikan blog Anda sudah dilengkapi dengan jquery library (berapa pun versinya).


 terakhir, berikut ini video amatir meletusnya Gunung Kelud :



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

You Might Also Like:

Disqus Comments