Membuat Tampilan Video Youtube Menjadi Responsive

How To Make Youtube Videos Being Responsive Display : Seperti kita semua harapkan mungkin di tahun ini akan menjadi tahun responsive dimana hampir semua pengguna Internet menggunakan Gadget seperti Handphone, Tablet, Ipod dsb. Dengan banyaknya pengguna gadget maka banyak juga lahir ilmu-ilmu baru tentang Responsive yaitu sebuah teknik yang digunakan untuk membuat layout website menyesuaikan diri dengan tampilan device, baik itu ukuran maupun orientasinya.



Baca juga :

• Membuat Blog Agar Valid HTML5

Jadi tampilan yang berada di desktop komputer dengan tampilan yang diakses melalui SmartPhone akan sama tampilannya. Untuk Responsive Web Design tidak harus mengaksesnya melalui mobile device ataupun device lainnya, namun cukup dengan meminimize browser saja ke dalam ukuran mobile device yang diinginkan, kita sudah dapat melihat tampilan website kita pada layar mobile device. Nah bagaiman jika tampilan Video Youtube menyesuaikan dengan tampilan Device padahal kita tahu selama ini jika kita mengakses suatu blog atau web yang berisikan Video maka video yang ada didalam postingan tersebut tidak menyesuaikan dengan smarfon kita, inilah yang menjadi kendala bagi Admin web/blog saat ini. Dengan perkembangnya zaman akhirnya banyak para Master menemukan script yang akan membuat tampilan video youtube terutama pada blog Anda akan menyesuaikan dengan SmartPhone.

Pada posting kali ini saya akan sharing bagaimana cara agar video youtube tersebut menyesuaikan dengan tampilan device Anda. Untuk masalah Valid HTML5 Anda jangan bimbang karena script yang nantinya saya akan berikan sudah diuji coba terlebih dahulu kevalidasihannya.

Cara Pemasangan Responsive Video Youtube

1. Silahkan simpan Js berikut diatas kode </head> namun jika pada template Anda telah terpasang javacript ini dengan versi berapa saja silahkan lewati saja

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

2. Simpan kode CSS ini di atas ]]></b:skin> atau </style>

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

3. Kemudian simpan kode ini di atas ]]></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>

4. Untuk penggunaannya silahkan buat postingan baru kemudian pilih HTML dan masukkan kode pemanggil ini didalamnya

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

Keterangan :
Ganti Kode embed video dari youtube pada Url yang saya tandai diatas dengan kode embed yang Anda inginkan

Sumber :
http://basicuse.net/articles/pl/textile/html_css/resizing_youtube_and_html5_videos_proportionally_using_css_for_responsive_web_design http://www.kompiajaib.com/2014/02/modifikasi-tampilan-video-youtube.html