Cara Membuat Video YouTube Menjadi Responsive di Blogger

Youtube adalah aplikasi atau platform berbagi video yang sangat populer, tentu dari kamu ingin menyisipkan video dalam blog tentu agar bisa rapi harus responsive kan.

Pada kali ini saya akan share Cara Membuat Video YouTube Menjadi Responsive di Blogger,ya walaupun di youtube ada fitur embed video yang mana bisa kamu sisipkan pada blog kamu. 

Nah kali ini Mas Dar akan share bagaimana video tersebut menjadi lebih responsive pada blog, berikut ini adalah tutorial nya berikut ini yang mungkin kamu bisa coba. 

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>

3. Simpan template.

4. Selanjutnya untuk menambahkan video pada postingan, gunakan kode di bawah ini :

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

Contoh link embed video yang diambil :

Salin link embed seperti screenshot di atas, kemudian simpan di dalam kode HTML di atas seperti ini :

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

5. Terakhir simpan / publikasikan postingan.

• Result

Update : CSS Only

Saya mendapat ide dari komentar sobat duniavern untuk mengakali embed video youtube menjadi responsive hanya dengan CSS. Bagi yang ingin mengganti hanya dengan menambahkan CSS saja, sobat bisa pasang kode di bawah ini sebelum </head> :

<style type='text/css'>
/* 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>

Atur kembali CSS max-height dalam media query jika kurang sesuai.

Kini video youtube yang diembed di postingan sudah responsive yang berarti video bisa menyesuaikan dengan ukuran dalam layar apapun. Sekian sedikit trik tentang Cara Terbaru Memasang Video Youtube Responsive di Blog. Mudah-mudahan bermanfaat bagi sobat blogger semua. Terima kasih.

Share :