CSS: Резиновое видео

Когда-то давно, когда я создавал тему для WordPress, у меня появилась проблема, которая заключалась в том, чтобы контейнеры с видео на странице были «резиновыми». Используя max-width:100 % и height:auto я добился нужного мне результата, но он работал только в HTML5. После длительных часов поиска варианта решения, я, в конце концов, нашёл его. Если вы - любитель резиновых сайтов, то этот урок по CSS вам очень пригодится.

Резиновое видео 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).


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/2IxVYW5XdCs/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

CSS: Резиновое видео | | 2012-06-19 12:06:55 | | Статьи Web-мастеру | | Когда-то давно, когда я создавал тему для WordPress, у меня появилась проблема, которая заключалась в том, чтобы контейнеры с видео на странице были «резиновыми». Используя max-width:100 % и | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: