Cara Memasang Video Youtube Responsive di Blogger - Onet4u Tech
Dark
News Update
Loading...

Cara Memasang Video Youtube Responsive di Blogger

Cara Memasang Video Youtube Responsive di Blogger
Also Read
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.
Cara Memasang Video Youtube Responsive di Blogger

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 .
dottycat
“Don’t try to plan everything out to the very last detail. I’m a big believer in just getting it out there: create a minimal viable product or website, launch it, and get feedback.”

RELATED POSTS

COMMENT

Load Comments

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel