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-containerembed{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

Next, edit add some HTML around your embed code.

HTML

1
2
3
<divclass="video-container">
         <iframesrc="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.mymenggunakan 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 for free consultations to improve your business.

Nak Tahu Cara Berniaga Di Shopee Dengan Betul?

Your Title Here

Overviews value for workplace organically high.

Your Title Here

Overviews value for workplace organically high.