 |
| ilustrasi |
halo teman-teman pencinta blog, yang suka menulis dan suka berbagi, kali ini saya ingin share sedikit tips mengenai video Youtube, iyaa maksud saya cara menampilkan video youtube dalam postingan blog namun dia bisa menyesuaikan ukurannya dimanapun,mau itu di PC atau di Smarphone terserah, pokoknya dia akan menyesuaikan ukurannya sesuai dengan apa yang kamu gunakan. Tanpa basa-basi lagi langsung aja ke tahapannya yuukk!!
Baca juga:
- Cara posting Ulang status Facebook, Instagram, dan twitter di blog
- Cara Membuat Kotak Catatan blockquote keren di postingan blog
- Pengalaman diterima di adsense | Mukhlis MJ
- Cara Buat Kotak Script Responsive dalam Postingan Seperti Arlina Design
#LANGKAH 1
Buka Blogger > Template > Edit HTML > Tambahkan Kode dibawah ini sebelum ]]></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}
#LANGKAH 2
Tambahkan Kode dibawah ini sebelum </body>
Gunakan Kode dibawah ini untuk menampilkan Video Youtube di postingan blog, Ganti Kode yang berwarna Putih dengan kode video youtube teman-teman Atau lihat contoh di dibawah ini.
<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>
#LANGKAH 3
Simpan Template
#LANGKAH 4
Gunakan Kode dibawah ini untuk menampilkan Video Youtube di postingan blog, Ganti Kode yang berwarna Putih dengan kode video youtube teman-teman Atau lihat contoh di dibawah ini.
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="SIMPAN-LINK-EMBED-VIDEO-DI-SINI">
</div>
</div>
</div>
Cara menerapkan video youtube ke postingan
#STEP 1
Copy dan Pastekan Link HTML diatas pada postingan blog sobab, INGAT!! di bagian HTML ya bukan dibagian COMPOSE.
#STEP 2
buka Youtube dan Copy link EMBED nya / Lihat Gambar dibawah.
 |
| #LANGKAH 1 |
 |
| #LANGKAH 2: Copy Linknya Persis seperti yang saya block |
sehingga Kode HTML nya menjadi seperti kode dibawah ini.
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="https://www.youtube.com/embed/Xa5K9MuoFSw">
</div>
</div>
</div>
EmoticonEmoticon