—»     —»   Добавляем адаптивные видео-файлы в дизайн
  Раздел: Видео   Комментариев: 4  

Добавляем адаптивные видео-файлы в дизайн



Адаптивный дизайн сегодня семимильными шагами распространяется в мире веб-дизайна. Так как видео-файлы в наши дни стали неотъемлемым элементом маркетинга среди многих веб-сайтов, появляется острая необходимость использовать адаптивное видео в дизайне. Адаптивное видео гибкое, и особенно подходит в тех случаях, когда веб-страницы открываются с различных устройств, размеры экранов которых отличается.

Добавляем адаптивные видео-файлы в дизайн

Тем не менее, недостаточно просто использовать элемент 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%;
}

Работающее демо с использованием вышеприведенного отрывка кода вы можете посмотреть здесь.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: адаптивный дизайн, YouTube
Опубликовал Design FactoRy   Прочитано (раз): 15108   |   Оставлено комментариев: 4
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 7 августа 2012 @ 11:59
Написал: Кир — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
вот удобная штука для тестирования страницы на адаптивность http://********/
Комментарий #2: 7 августа 2012 @ 12:10
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Кир, хватит спамить своей ссылкой! Вы лучше по теме материала высказывайтесь ...
Комментарий #3: 7 августа 2012 @ 12:24
Написал: Webaнутый — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
А у лисы с этим способом проблемы... если делать ресайз окна, в какой-то момент оно страшно дергается в исходное положение.
Комментарий #4: 7 августа 2012 @ 12:49
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Webaнутый, ну не знаю ... вот только что попробовал в версии 14.0.1 демку прокрутить ... все нормально, ничего не глючит.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Турция из алматы туры
Об отдыхе в Турции. Описание курортов Турции
riotour.kz
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Август 2017    »
ПнВтСрЧтПтСбВс
 123456
78910111213
14151617181920
21222324252627
28293031