Cara Memasang Video Youtube Responsive di Blog

Table of Contents

Summary

This time I will share about 'Cara Memasang Video Youtube Responsive di Blog'

Continue reading about our main topic which is Cara Memasang Video Youtube Responsive di Blog

Youtube ialah website perkongsian video paling popular hari ini di mana anda boleh memuat naik video, menonton video, atau anda juga boleh mendapatkan wang daripada YouTube dengan mendaftar akaun Adsense melalui YouTube.

Kali ini saya akan kongsikan cara untuk memasang video youtube di dalam posting blog anda tanpa menggunakan iframe.

Iframe berpengaruh pada loading blog anda dan seterusnya akan mempengaruhi seo sesebuah blog dimana loading sesebuah blog mempengaruhi seo, Oleh itu saya akan kongsikan kepada anda cara mengatasi permasalahan ini seterusnya dapat mengekalkan seo blog anda.

Sebelum itu perlu anda tahu bahawa cara yang saya gunakan ini sesuai buat platform blogger & custom php blog dan yang seangkatan denganya, kerana saya telah mencoba di beberapa platform seperti blogger, wordpress dan custom blog seperti yang saya gunakan saat ini.

Untuk menggunakan code ini ianya sangat senang kerana saya telah siapkan semua keperluan yang anda perlukan bermula dari css,html dan javascript , anda hanya perlu copy dan pasangkan ke dalam blog anda.

Cara-Cara

Hal yang pertama yang perlu anda buat ialah memasang kod css ke dalam css style anda ataupun memasang code css ini di atas code penutup head. Berikut kod css yang perlu anda pasang:

<style>/* Youtube Responsive */
@keyframes littleShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
.loader{position:relative;width:100%;float:left;overflow:hidden;height:350px;margin-right:12px;animation:littleShine .85s linear infinite;background:#f5f5f5 linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.75) 20%,rgba(255,255,255,0) 30%);background-size:800px 100px}
.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}
/* CSS Only */
.post-body iframe{width:100%!important;}
@media screen and (max-width:960px){
.post-body iframe{max-height:90%}}
@media screen and (max-width:768px){
.post-body iframe{max-height:75%}}
@media screen and (max-width:600px){
.post-body iframe{max-height:60%}}
@media screen and (max-width:480px){
.post-body iframe{height:auto!important;max-height:auto!important}}
</style>

Seterusnya anda perlu memasang javascript berikut pada bahagian footer dimana sebelum kod penutup body. Berikut kod javascript yang perlu anda pasang:

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

Setelah memasang kedua dua kod di atas, Anda sekarang hanya perlu membuat post tentang video youtube yang korang inginkan dengam menggunakan code berikut

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="SIMPAN-LINK-EMBED-VIDEO-DI-SINI">
</div>
</div>
</div>

Perhatikan bahagian SIMPAN-LINK-VIDEO-DI-SINI dan gantikan dengan link video anda .

Untuk lebih memudahkan anda, anda boleh menukar kod css sesuai keinginan anda untuk memudahkan anda mengingatinya, cara ini saya sangat rekomenkan bagi para blogger yang mementingkan  seo blog mereka.

Sebagai contoh anda boleh lihat demo berikut.

Conclusion

So I think you might understand and like our article about Cara Memasang Video Youtube Responsive di Blog. So in my conclusion, If you don't understand any of the steps then don't hesitate to leave a comment in the space we have provided.

Share with your friends and spread this article to the whole world😍

Assalamualaikummm..