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

Dilarang Copy-Paste artikel di blog ini dan apabila kami menemukan artikel dicuri tanpa mencantumkan sumber link blog Amplopcokelat.com maka tak segan akan kami laporkan !

Berlangganan artikel Gratis langsung via email...

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar