linkedin facebook linkedin facebook nod32

Cho’ziluvchan vedio HTML5

Muallif: Mengliyev SH.

Qo`shilgan sana: 2014-07-06

Cho’ziluvchan vedio HTML5


Siz  HTML5 cho’ziluvchan vedioni max-width:100% yordamida oson qilishingiz mumkin. Lekin bu  xolda u  ishlamaydi. Agar siz  iframe yoki boshqa  biron saytdan foydalansangiz  va  saqlab  qo’yish vediosida  ishlaydi.
video {
max-width: 100%;
height: auto;
}

Cho’ziluvchan ob’ekt va tekislangan  vedio
Aslida  bu  juda  oson siz vedioni bosh  blokga qo’yishingiz, undan keyin shu elimetni (iframe, tekislangan ob’ekt), eniga 100% uzunasiga oxirigacha.
CSS
.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%;
}

HTML
<div class="video-container">
<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>
Qanday qilib enliфиксированнуюni yaratish +cho’ziluvchan prinsip.
Enli vedioni chegaralsh uchun  bizga  yangi div  kerak  bo’ladi. Keyin  max-width:100 % yordamida  foydalanmiz.
CSS
.video-wrapper {
width: 600px;
max-width: 100%;
}
HTML
<div class="video-wrapper">
<div class="video-container">
<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>
<!-- /video -->
</div>
<!-- /video-wrapper -->
Kelishuvchilar
Bu javoblar hammasi brovzerlarga to’ri keladi (tekshirilganlari Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone и iPad).

Bu sayt ruseller.com komandasi  tayorladi.
Dars beruvchi: www.webdesignerwall.com/tutorials/css-elastic-videos

1484 marta o`qildi.

Parol:
Eslab qolish.


Ro`yhatdan o`tish

testing

+998915878681

Siz o`z maxsulotingizni 3D reklama ko`rinishda bo`lishini xohlaysizmi? Unda xamkorlik qilamiz.

3D Reklama


Рейтинг@Mail.ru
Рейтинг@Mail.ru

Besucherzahler
счетчик посещений