Cara Menampilkan Video Youtube Responsive di Blog

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:

#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>
<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&quot;>
</div>
</div>
</div>


Semoga Bermanfaat

Share this