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!

 

Keseluruhan tulisan saya di blog ini maupun di Artikel-Teknologi.com menggunakan fasilitas aplikasi WordPress for iOS. Aplikasi ini sangat membantu aktifitas menulis karena beberapa hal seperti hemat bandwith, fasilitas menyimpan konsep artikel secara lebih simpel, dan banyak kemudahan lain.

Satu kesulitan muncul di saat saya ingin meng-embed salah satu video di youtube ke dalam artikel saya. Mencari sort code nya harus membuka halaman web desktop youtube.com yang cukup sulit jika dilakukan di browser native iPhone ataupun iPad.

Akhirnya saya menggunakan cara lain yakni menyimpan sortcode kode html utama yang dipergunakan untuk meng-embed video. Berikut adalah kode tersebut.

<iframe width="420" height="315" src="//www.youtube.com/embed/EMBED~CODE" frameborder="0" allowfullscreen></iframe>

Ganti frasa EMBED~CODE di atas dengan kode unik yang ada di setiap page link video youtube yang ingin Anda embed. Sedangkan ukuran dari video dapat Anda atur dengan mengubah-ubah nilai width dan height pada kode di atas.