Membuat Embed Youtube di Blog Menjadi Responsive

Ini sekedar catatan saja, atau mungkin dapat membantu untuk Anda yang memerlukan script untuk membuat Embed Youtube di Blog menjadi responsive.

Pertama - tama masukan kode CSS di bawah ini

.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;
}

Simpan kode loader iframe youtube dibawah ini diatas kode </body>

<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>

Jika belum terisi, maka isilah blog Anda dengan Jquery Library seperti dibawah ini

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

Nah, setiap kali posting gunakan script dibawah ini pada halaman HTML posting Anda. Pada huruf merah dibawah didapat dari embed source link Youtube yang Anda ingin tampilkan.

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

Ingin tahu tampilannya bagaimana? Bisa dilihat pada postingan ini.