Membuat Video Youtube Mobile Responsive

Sekarang jamannya mobile, jadi kalau bikin web wordpress misalnya, pilih themes yang mobile responsive, artinya, kalau dilihat dari mobile browser, tampilannya lebih enak dilihat.

Sayangnya, kalau kita embed video youtube, videonya ngga responsive / tidak ikut mengecil sekecil mobile browser, nah ini trick nya menggunakan css.

Pertama buat css di style.css wordpress theme anda sbb:
.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%;
}

Lalu tinggal digunakan pada saat meng-embed video youtube, contoh:

<div class=”video-container”>
<iframe src=”http://www.youtube.com/embed/I5l05uqAFso?rel=0″ height=”315″ width=”560″ allowfullscreen=”” frameborder=”0″></iframe>
</div>

Speak Your Mind

*