Комментарий: Когда я закодировал тему Elemin (отзывчивый сайт, который я разработал недавно), один из пропусков рамки, с которыми я столкнулся, было то, как сделать встроенные видео более гибкими по изменениям размеров; Через несколько часов поиска данных и экспериментов я наконец нашел решение
Когда я закодировал тему Elemin (отзывчивый сайт, который я разработал недавно), одним из пропусков рамки, с которыми я столкнулся, было то, как сделать встроенные видео более гибкими по изменениям размеров. Использование максимальной ширины: 100% и высота: AUTO может заставить видеобедру HTML5 работать хорошо, но это решение не работает с встроенным кодом для iframe или тегов объекта. После нескольких часов поиска данных и экспериментов я наконец нашел решение. Эта техника CSS пригодится, когда вы делаете отзывчивый дизайн.
Гибкий видео тег HTML5
Используя видео HTML5, вы можете сделать его гибким, установив максимальную ширину: 100%. В предыдущем введении упоминалось, что оно не применимо к обычно используемым iframes и встроенным кодам в объектах.
видео {
максимальная ширина: 100%;
Высота: Авто;
}
Гибкий объект и iframe встроенные видео
Этот трюк довольно проста, вам нужно добавить контейнер <div> в видео и установить стоимость свойства Div-набивки от 50% до 60%. Затем установите ширину и высоту дочернего элемента (ifame или объект) на 100%и используйте абсолютное позиционирование. Это заставляет встроенный объект автоматически расширяться до максимума.
CSS
.video-Container {
позиция: относительно;
надоеволос: 56,25%;
надоеволок: 30px;
высота: 0;
переполнение: скрыто;
}
.video-Container iframe,
. Video-Container объект,
. Видео-контентера встроена {
позиция: абсолютно;
Верх: 0;
слева: 0;
Ширина: 100%;
высота: 100%;
}
HTML
<div>
<iframe src = "http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" crameborder = "0"> </iframe>
</div>
Достичь гибкости при фиксированной ширине
Если ширина видео ограничена, то нам нужен дополнительный <div> контейнер, чтобы обернуть видео и установить фиксированную ширину и максимальную ширину: 100% для Div.
CSS
.video-wrapper {
Ширина: 600px;
максимальная ширина: 100%;
}
HTML
<div>
<div>
<iframe src = "http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" crameborder = "0"> </iframe>
</div>
<!- /Видео->
</div>
<!- /Видео-вручение->
совместимость
Этот трюк поддерживает все браузеры, в том числе: Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone и iPad.