Cara Memasang Video Youtube Responsive di Blogger

Assalamualaikum, Kali ini saya akan memberi tutorial Memasang Video Youtube Responsive di Blogger terbaru.

Banyak kelebihan yang ditawarkan oleh laman youtube ini, salah satunya ialah ciri video yang boleh ditambah dan boleh ditonton terus di blog. Tetapi dengan menambah video, ia akan mengurangkan nilai SEO blog kerana elemen iframe dan penampilannya tidak responsif jika saiz skrin diminimumkan.

Oleh itu di sini O4U menyediakan tip supaya video youtube menjadi responsif dan tidak akan mengurangkan nilai SEO blog anda. Inilah caranya untuk Memasangnya:

1. Buka Blogger > Template > Edit HTML > Tambahkan kode di bawah ini sebelum ]]></b:skin> atau </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}

2. Tambahkan kode di bawah 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>

Selanjutnya simpan template anda dan buat posting test untuk memastikan ia berfungsi dengan baiknya, Masukan code berikud di dalam posting test anda.

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

Demo :


Gantikan UQbNtP1F3pg dengan id video anda, Dan setelah siap silakan public posting anda dan lihat hasilnya, Bagai mana? Anda punya masalah? Silakan tinggalkan comment di ruangan yang di sediakan.

Baiklah sampai di sini sahaja posting saya tentang Cara Memasang Video Youtube Responsive di Blogger, Moga apa yang saya kongsikan ini dapat membantu anda .