Kode Embed Youtube dengan Desain Responsif

Desain responsif adalah sebuah konsep satu tema wordpress untuk banyak resolusi layar. Konsep ini semakin populer sejalan dengan semakin menjamurnya berbagai jenis gadget dengan perbedaan resolusi layar. Dengan konsep desain responsif ini maka tampilan dari halaman web kita akan lebih bersahabat untuk segala ukuran resolusi. Bahkan Google Adsense pun sudah memfasilitasi konsep ini dengan adanya satu tipe iklan responsif.

Lain cerita dengan Youtube yang tidak memfasilitasi konsep desain responsif pada video embed-nya. Maka kita perlu sedikit “utak-utik” untuk dapat menampilkan video embed dengan lebar tampilan yang secara otomatis menyesuaikan resolusi device pengguna.

1. Copy dan paste kode CSS berikut ke baris paling akhir kode CSS tema wordpress Anda.

   .video-container {
       position: relative;
       padding-bottom: 56.25%;
       padding-top: 30px; height: 0; overflow: hidden;
   }
    
   .video-container iframe,
   .video-container object,
   .video-container embed {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
   }
   

2. Lalu gunakan kode berikut untuk meng-embed video youtube yang Anda inginkan, dengan mengganti frasa <video code> dengan kode unik video tersebut. Lalu tempatkan kode tersebut di halaman manapun yang Anda inginkan untuk menampilkan video tersebut.

   <div class="video-container">
    <iframe src="http://www.youtube.com/embed/<video code>" frameborder="0" width="560" height="315"></iframe></div>

Semoga berhasil!