Lady Gaga

Salam hormat rakan-rakan IM sekalian. Post kali ini saya nak straight to the point nak tunjukkan bagaimana memasukkan video Youtube yang responsif – iaitu saiz video boleh berubah-ubah mengikut browser yang kita guna. Baiklah, anda perlu lakukan 2 langkah utama dengan mengedit fail .css dan juga kod HTML di website anda untuk menjadikan saiz video youtube yang anda embed di website anda responsif.

Langkah 1 – tambah kod ini ke fail .css anda

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.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%;
}

Next, edit add some HTML around your embed code.

HTML

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

Jika anda lakukannya dengan betul, anda boleh lihat saiz video akan berubah. Sebagai contoh, sila layari http://jururawatbergerak.my menggunakan komputer dan juga handphone anda. Anda boleh lihat, saiz video yang terdapat di laman web tersebut berubah mengikut devise yang anda gunakan.

About Tarmizi Sukarno

Im a part time internet marketer, Online Seller, Offline Seller, and Creative Advertiser Implementer. Feel free to contact me at +6011-38800002 for free consultations to improve your business.