Cara Terbaru Memasang Video Youtube Responsive

Jika sobat adalah seorang yang hobbynya memposting video youtube di halaman blog sobat, maka postingan kali ini akan membuat hati sobat menjadi senang, bagaimana tidak selama ini sobat bingung dengan cara membuat atau memasang video youtube yang responsive, yang ada atau sering kita temui adalah jika postingan video kita dibuka pada smartphone maka postingan video tersebut menjadi terpotong, atau menjadi tidak proporsional tampilannya.

Berikut ini adalah tuorial cara membuat video youtube yang ada diblog sobat menjadi responsive, cara memasangnya pun tidak sulit, silahkan ikuti prosesnya dibawah ini.

Cara Terbaru Memasang Video Youtube Responsive

1. Login ke akun blogger anda

2. Click On Template » Edit HTML

3. Gunakan Ctrl+F  untuk menemukan kode ]]></b:skin> atau </style>

4. Setelah ketemu letakan kode CSS script diatas kode ]]></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}

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

5. Tambahkan Javascript berikut sebelum kode  </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>

Click save

6. Letakan kode HTML >> pada area posting yang anda inginkan.

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

Demo on Codepen - Demo Internal

Silahkan tinggalkan komentar jika anda menemui kedala dalam pemasangan recent post ini, mari kita bahas bersama! 

Demikian sedikit penjelasan tentang Cara Terbaru Memasang Video Youtube Responsive, jika ada kesalahan dalam penulisan saya mohon maaf dan semoga bermanfaat. Saya akan sangat senang dan berterimakasih jika sobat berkenan untuk berkomentar di blog ini.