Cara Pasang Video Youtube di Blog Agar Tampil Responsive di Ponsel

Cara Pasang Video Youtube di Blog Agar Tampil Responsive di HP - Bagi kalian yang memasang atau menambahkan video youtube di blog, namun saat blog anda diakses melalui HP video tersebut tidak tampil responsive melainkan tampil penuh melebihi layar HP, sehingga tidak dapat ditonton oleh pengunjung dengan jelas. Dan kemungkinan juga dapat memperlambat loading blog anda saat di akses melalui HP. Permasalahannya yaitu di saat anda menambahkan video di blog anda hanya memasang embed code video youtube tanpa menambahkan kode script tambahan. Nah untuk mengatasi hal tersebut maka anda harus membuat video youtube tersebut agar tampil full responsive saat dibuka melalui HP. Lalu bagaimana caranya agar video youtube yang kita pasang di blog agar bisa ytampil full responsive di HP. Caranya cukup mudah sekali, anda cukup menambahkan kode script disertai embed code video youtube yang akan dipasang di blog anda. Untuk lebih jelasnya, silahkan simak tutorial Cara Memasang Video Youtube Full Responsive di Blog berikut ini.

Cara Pasang Video Youtube di Blog Agar Full Responsive di HP

1. Pertama, Buka Blogger masuk ke Template - Edit HTML dan silahkan Tambahkan kode di bawah 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}

2. Setelah itu, 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. Lalu, Klik simpan template.

4. Selanjutnya untuk menambahkan video youtube pada postingan anda, silahkan 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, seperti di bawah ini:

Lalu silahkan anda salin link embed video yang ada seperti screenshot di atas, kemudian simpan di dalam kode HTML di atas seperti berikut ini :

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

5. Terakhir simpan / publikasikan postingan anda. 

Update : CSS Only  

Cara lain memasang Video Youtube Agar Full Responsive di Blog, yaitu untuk mengakali embed video youtube agar menjadi responsive hanya dengan CSS. Jadi anda hanya tinggal menambahkan CSS saja, anda bisa pasang kode CSS di bawah ini:

/* 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}}

Jika tampilan masih kurang sesuai, anda bisa atur kembali CSS max-height dalam media query.

Tweet