Cara Menampilkan Video Yutube di Blogger Responsive

15 Views16 Views
Read Time:2 Minute, 33 Second

Trendkan.Net – Hallo Sobat trend. Siapa sih yang gak kenal dengan youtube? Semua pasti sudah kenal ya kan. Bahkan anak saya yang masih berumur 3 tahun saja sudah mengenalnya dan Hampir setiap hari tontonannya adalah youtube. tapi tentunya tontonan khusus anak2 ya sobat. Anak saya itu sukanya nonton film robot yang biasa tayang di RTV itu loh. Mulai dari Tayo, robokapoli (atau apa namanya saya ga hafal) sampai dengan robot yang penuh aksi heroik entah apa namanya (seperti power ranger gitu kalo di jaman saya kecil). Loh koq jadi ngomongan tontonan anak saya sih..
Kembali ke topik ya sobat trend, Cara Menampilkan Video Yutube di Blogger ini sebenarnya sudah cukup banyak yang mengulasnya. Hanya saja pada tulisan saya kali ini, saya hanya ingin menyimpan ilmu yang sudah saya dapat siapa tau beberapa hari kedepan, saya ingin menggunakannya untuk menampilkan video youtube ke dalam blog saya ini. Namun, Mungkin ini juga bisa bermanfaat bagi sobat trend yang belum tau caranya bagaimana menampilkan video youtube ke dalam blog sobat trend. Baik langsung saja tutorial Cara Menampilkan Video Yutube di Blogger Responsive nya.

Cara Menampilkan Video Yutube di Blogger Responsive

1. Yang pertama tentunya sobat sudah harus login terlebih dahulu di blogger sobat, kemudian Edit tema blog sobat.
2. Setelah berada di halaman edit html tema sobat, silahkan cari kode ]]></b:skin> , gunakan saja ctrl+F untuk mencarinya. Setelah ketemu, silahkan pastekan kode berikut ini dan letakkan di atas/sebelum kode ]]></b:skin> tadi.

.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}

3. Masih dalam halaman edit html, cari lagi kode </body> . dan letakkan kode script berikut ini diatasnya.

<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>

4. Kemudian tekan save untuk menyimpan tema blog sobat. proses persiapan sudah selesai.

Baca Juga ya…

BACA JUGA  Cara Termudah Pasang Tombol Go To Up pada Blogger

5. Untuk selanjutnya jika sobat ingin menampilkan video youtube di postingan, salin kode berikut ini dan pastekan pada mode HTML ketika sobat mempostingnya.

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

Ingat mempostingnya dalam mode HTMl ya sobat, jangan mode Compose. Kemudian Sobat hanya perlu mengganti _1EYAH8dmx0 saja dengan link video youtube sobat.
Untuk Contoh hasil nya sobat bisa lihat di bawah ini.

Video itu hanya contoh saja ya sobat, saya bukan promosi..

ArRahim
Berbagi itu bukan tentang seberapa besar dan seberapa berharganya apa yang kau beri, namun seberapa tulus dan ikhlasnya apa yang ingin kau beri.
administrator
Happy
Happy
Sad
Sad
Excited
Excited
Sleppy
Sleppy
Angry
Angry
Surprise
Surprise

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *