Membuat Tampilan Youtube Responsive di Blog

Membuat Tampilan Youtube Responsive di Blog

Membuat Tampilan Youtube Responsive di Blog - Sudah berapa lama nih update postingan disini, kali ini saya akan mencoba membuat tampilan youtube yang bisa kita pasang di blog agar bisa responsive. Kenapa harus responsive? seiring berkembangan responsive di dunia internet ini kita harus mengikuti dan menyesuaikannya embed, salah satunya adalah Youtube

Sebenarnya kita hanya memodifikasi pada embed agar tampilan yang akan terlihat bisa menyesuaikan device yang kita pakai. 

Langsung saja simak tutorialnya berikut ini :
1. Simpan Jquery pada edit HTML dan letakkan diatas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

2. simpan Kode kode CSS di atas kode ]]></b:skin> atau </style>

.ytbvideo{
    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;
}
.res-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin:8px;
}
.res-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border:0;
}

3. Simpan kode javascrip berikut diatas kode </body>

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

4. Selanjutkan kita menuju ke postingan dan masukkan kode

<div class="ytbvideo">
<div class="res-video">
<div class="ytbvideo loader" data-src="//www.youtube.com/embed/hX3XaILYM2c"></div>
</div>
</div>

DEMO

Semoga bermanfaat

resource: http://www.kompiajaib.com/2014/02/modifikasi-tampilan-video-youtube.html