SCRIPT UNTUK VIDEO YOUTUBE MENJADI RESPONSIVE PADA BLOG

Dewasa ini era sosial media yang kian menjamur, salah satu sosial media ajang berbagi video milik google yaitu youtube siapa yang tak mengenalnya protal video online ajang berbagi kreatifitas sampai ajang promosi bahkan narsisem. Kali ini tidak membahas lebih jauh perihal portal video share youtube melainkan bagaimana caranya agar video dari youtube dapat kita pasang pada blog dan menjadi video responsive pada blog. Di era mobilegeddon semua blog ataupun website harus mendukung mobile dalam arti kata lain adalah tampilan web ataupun blog yang responsive.

Baca juga 5 script penting yang wajib terpasang pada blog

Adapun untuk menjadikan tampilan video menjadi responsive pada blog memerlukan beberapa script tambahan agar video tersebut sesuai dengan harapan. Adapun script yang dibutuhkan untuk video yutube responsive pada blog antara lain :

1. Simpan kode berikut diatas ]]></b:skin>

<!--youtube-->
.videoyoutube{
    text-align: center;
    background:linear-gradient(to bottom, #fefefe 0%, #d1d1d1 100%);
    border:1px solid #A8A8A8;
    border-radius:5px;
    margin:20px auto;
    width:80%;
    box-shadow: 1px 30px 30px -26px #818181;
}
.video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin:8px;
}
.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border:0;
}
<!--end-->

2. Kemudian pasang script berikut ini diatas tag kode </body>

<!--youtube-->
 <script type='text/javascript'>
//<![CDATA[
setTimeout(function(){
$('.video-youtube').each(function(){
$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data('src')+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5000);
//]]>
</script>
<!--end-->

3. Dalam form posting klik html pasang dimana akan menempelkan video tersebut dengan kode berikut dan ganti XXXXXXX dengan url kode youtube yang akan dipasang:

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/XXXXXXXX" height="375" width="100%">
</div>
</div>
</div>

Demikianlah tutorial cara membuat vidoe responsive dari youtube  di blogspot

Demo