Cara Pasang Video Youtube Responsif Di Blog

Hai teman pada postingan kali ini saya ingin sedikit membagikan kode HTML yang mungkin sedang kalian cari.

Ngomongi soal blog emang tiada habis nya.

Dari awal saya mengenal Dunia Bloger dan sampai sekarang saya masih suka utak atik website saya sendiri.

Setiap hari ada aja yang ingin di tambahin di website tersebut.

Nah pada kesempatan kali ini saya ada sedikit kode HTML yang ingin saya berikan kepada kalian teman.

Kode HTML kali ini bertujuan untuk memasang Video yang ada di Youtube bisa tampil di blog teman dengan Responsif.

Caranya kalian tidak perlu mengupload video yang ada di YouTube ke blog kalian teman.

Nah kalian cuma butuh link "embed" video yang ingin kalian taruh di blog.

Tetapi terlebih dahulu kalian pasang beberapa code CSS di blog kalian teman.

Ikuti cara dibawah ini dengan benar.

Buka Thema cari tulisan </b-skin> atau </Style>.

Setelah itu tempelkan kode di bawah ini tepat di atas </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}

.post-body img {

max-width: 100%;

max-height: auto;

display: block;

margin: auto; 

}

Setelah itu kalian tempel kan kode di bawah ini tepat di atas</body>.

//<![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);

//]]>

Jika Sudah simpan template/theme kalian teman.

Kemudian kalian buat postingan baru, setelah itu tuliskan Kode ini sesuai keinginan kalian teman.

Ini kode HTML yang kalian harus tulis di postingan baru.

<div class="videoyoutube">

<div class="video-responsive">

<div class="video-youtube loader" data-src="https://www.youtube.com/embed/"Masukan Embed code disini" ></div></div</div>

Contoh Ambil Kode "Embed" di Youtube https://m.youtube.com/watch?v=37-ZBsqfEE0. 

Ambil Kode yang saya garis bawahi di atas dan tulis di "Masukan Embed code disini".

Mungkin sekian dulu postingan yang bisa saya tulis teman.

Jika ada kendala dan kurang paham bisa ditanya melalui Colom comment dibawah ya teman.