Резиновое видео на сайт

Не вникая в подробности, сделал для себя в качестве заметки. Размен задал в 70 процентов.

<div style="position: relative;padding: 28px 25px 70% 15%;height: 0;">
<iframe src="https://www.youtube.com/embed/кодвидео" frameborder="0" allowfullscreen style="position: absolute;width: 70%;height: 70%;"></iframe>
</div>

Вот результат — при любом размере экрана видео будет резиновым и отображаться в 70% предоставленного размера:

Резиновое видео HTML5

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

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

Резиновый объект & встроенное видео

На самом деле, решение очень простое. Вы должны поместить видео в отдельный div блок и выставить значения нижнего внутреннего отступа в 50%-60%. Затем можно определить дочерние элементы (iframe, встраиваемый объект), 100%-ая ширина, 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&byline=0&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&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
    </div>
    <!-- /video -->
</div>
<!-- /video-wrapper -->

Совместимость

Это решение работает на всех браузерах (проверены на Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone и iPad).

Статья взята отсюда.