Cara membuat video dari youtube responsive di website atau blog

Berikut adalah salah satu cara untuk membuat video dari youtube yang anda bagikan di website/blog anda menjadi responsive.

Ini bertujuan untuk memberikan tampilan video yang optimal dari berbagai perangkat, baik dari ponsel anda maupun PC/komputer. terlebih lagi sekarang smartphone sudah menjadi salah satu barang kebutuhan banyak kalangan, jadi sangat besar kemungkinan pembaca/pengunjung website anda menggunakan ponsel untuk membuka dan mengunjungi website atau blog anda.
langsung saja pada langkah-langkah yang harus dilakukan :

1. ini adalah contoh kode embed yang di copy dari video di youtube, pada umumnya belum responsive :

<iframe width="560" height="315" src="https://www.youtube.com/embed/a_N5sb0r5K0" frameborder="0" allowfullscreen></iframe>

2. hapus ukuran pada tampilan video pada kode embed, contohnya pada yang saya tandai dengan warna merah diatas, maka kode embed menjadi seperti dibawah :

<iframe src="https://www.youtube.com/embed/a_N5sb0r5K0" frameborder="0" allowfullscreen></iframe>

3. copy code dibawah dan letakan persis pada bagian atas kode embed video yang akan anda buat responsive.

<div class="embed-box">

maka akan jadi seperti ini :

<div class="embed-box">

<iframe src="https://www.youtube.com/embed/a_N5sb0r5K0" frameborder="0" allowfullscreen></iframe>

4. langkah terakhir masukan kode dibawah pada CSS.

.embed-box {

    position: relative;

    padding-bottom: 62.25%; /* ratio for youtube embed */

    padding-top: 30px;

    height: auto;

    overflow: hidden;

}

.embed-box iframe,

.embed-box object,

.embed-box embed {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

Berikut contoh peletakan kode diatas pada CSS blogspot :

Selesai. maka tampilan video akan seperti dibawah. coba buka/lihat video dalam postingan ini melalui ponsel, dan komputer anda.

semoga bermanfaat.