Эластичное видео

Создаем эластичное видео на сайте для iframe, object тегов видео, а также и для html5 видео. При изменении окна браузера изменяется и размер видео в нём.

HTML5 видео

Видео на HTML5 можно с легкостью сделать эластичным, при изменении размеров окна браузера, с помощью max-width:100% (смотрите Демо). Но этот трюк не работает с тегами iframe и object, который используется большинством видео сайтов, например YouTube и Vimeo.

CSS

video {
    max-width: 100%;
    height: auto;
}

Iframe и Object видео

Нужно обернуть код тегом DIV и указать для параметра padding bottom процентное значение от 50% до 60%. И указать дочерним элементам (iframe, object, embed) width:100%, height:100% и абсолютное позиционирование.

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&amp;byline=0&amp;portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>

Как сделать фиксированную ширину в сочетании с эластичностью?

Для ограничения ширины видео, нужно дополнительное обертывание в DIV с другим классом, для которого указана фиксированная ширина и максимальная ширина max-width:100%.

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&amp;byline=0&amp;portrait=0" width="800" height="450" frameborder="0"></iframe>
    </div>
</div>

Данный трюк должен работать во всех браузерах Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone и IPad.