Тем не менее, недостаточно просто использовать элемент HTML5 video при обработке кода встраивания видео, в котором используется iframe и тэги. Более того, элемент HTML5 video не будет работать с видео, размещенными на большинстве видео-обменниках вроде YouTube и Vimeo. Для того чтобы реализовать это, вам потребуется встраивать код посредством контейнера 'div', и указывать дочерние элементы с абсолютным позиционированием. В данном случае, задавайте 100% по ширине и высоте. Это позволит вам сделать так, чтобы встроенные элементы автоматически растягивались по всей ширине. Посмотрите, как это было реализовано посредством разметки, приведенной ниже:
<head>
<title>Demo: Elastic Videos</title>
</head>
<body>
<div id="pagewrap">
<h1>
<h2>Resize your browser window to see the elastic videos</h2>
<h3>New YouTube Code (iframe)</h3>
<div class="video-container">
<iframe width="853" height="510" src="http://www.youtube.com/embed/3R2cnxz27LI" frameborder="0" allowfullscreen=""/>
</div>
<h3>Old YouTube Code (embed)</h3>
<div class="video-container">
<object width="500" height="400">
<param name="movie" value="http://www.youtube.com/v/NmRTreaCJXs?version=3"/>
<param name="allowFullScreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<param name="wmode" value="transparent"/>
<embed wmode="transparent" src="http://www.youtube.com/v/NmRTreaCJXs?version=3" type="application/x-shockwave-flash" width="600" height="420" allowscriptaccess="always" allowfullscreen="true"/>
</object>
</div>
<h3>With fixed 600px wide wrapper</h3>
<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"/>
</div>
</div>
<h3>With fixed 500px wide wrapper</h3>
<div class="video-wrapper2">
<div class="video-container">
<object width="500" height="400">
<param name="movie" value="http://www.youtube.com/v/NmRTreaCJXs?version=3"/>
<param name="allowFullScreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<param name="wmode" value="transparent"/>
<embed wmode="transparent" src="http://www.youtube.com/v/NmRTreaCJXs?version=3" type="application/x-shockwave-flash" width="600" height="420" allowscriptaccess="always" allowfullscreen="true"/>
</object>
</div>
</div>
</body>А вот и 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%;
}При использовании CSS у нас появляется возможность включить функцию автоматического масштабирования видео по максимальной ширине и высоте. Для этого мы воспользуемся тэгом max-width. Также мы можем воспользоваться и тэгом минимального значения min-width.
Чтобы ограничить ширину видео, оберните его в еще один div, и укажите фиксированное значение ширины, как это показано ниже:
.video-wrapper {
width: 600px;
max-width: 100%;
}Работающее демо с использованием вышеприведенного отрывка кода вы можете посмотреть здесь.
