ЭЛАСТИЧНОЕ ВИДЕО


ЭЛАСТИЧНОЕ ВИДЕО


Создаем эластичное видео на сайте для 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.

Скачать исходник:
elastic_video.rar


скрипт скрипт ЭЛАСТИЧНОЕ ВИДЕО
Статистика
0  
Всего статей 1026
0  
Всего комментариев 57
0  
Пользователей 5
Обновления new
  • XenForo Resource Manager 1.1.4
  • Что такое Менеджер ресурсов (Resource Manager)? Менеджер ресурсов является официальным дополнением для XenForo, которое позволяет управлять
  • Boss Electronues - Шаблон для OpenCart
  • И так, данный шаблон заточен под OpenCart. В данном шаблоне есть не свойственная для магазинов возможность писать блоги. В шаблон встроен блог от
  • R.Gen - Шаблон на OpenCart
  • R.Gen - это отличный премиум шаблон на OpenCart. Отличный дизайн, полностью настраиваемый и в тоже время простой в шаблон для создания серьезного
  • 30 psd логотипов на разные тематики
  • Эта сборка из 30 psd логотипов на разную тематику. Логотипы схематичные, яркие, детализированные, в отличном качестве и в формате PSD. Логотипы не
  • Xenu Программа для проверки битых ссылок
  • Xenu старенькая но очень полезная программа для поиска битых ссылок на сайте. Описание: Проверка ссылок делается на: ссылки, изображения, рамок,
Информация