Отзывчивые видео решения для сайта

По мере того, как веб переходит к мобильному дружественному дизайну, аспект адаптивного дизайна взял под свой контроль. Существует множество решений для адаптивного дизайна, но немного загадочным было адаптивное видео. Теперь существует множество решений для адаптивного встраивания кодов и даже онлайн-сервисов, которые сделают всю работу за вас!

Типичный код для встраивания, предоставленный сайтами для обмена видео, такими как YouTube и Vimeo, предоставляет вам множество вариантов встраивания, но все еще не хватает одного большого ... адаптивного. В этом посте мы рассмотрим несколько простых решений для адаптивных видеокодов.

HTML и CSS решение

Наш первый пример - обернуть код для встраивания видео в класс DIV и добавить немного CSS, чтобы адаптировать iframe.

HTML

<div class = "videoWrapper">
<i-frame width = "560" height = "349" src = "https://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder = "0" allowfullscreen> </ iframe>
</ DIV>

CSS

.videoWrapper {
	положение: относительное;
	нижнее дно: 56,25%; / * 16: 9 * /
	padding-top: 25px;
	высота: 0;
}
.videoWrapper iframe {
	положение: абсолютное;
	верх: 0;
	слева: 0;
	ширина: 100%;
	высота: 100%;
}

Bootstrap Solution

Во втором примере используется код встраивания Bootstrap 3.2. В этом примере требуется Bootstrap 3, единственная проблема с этим, и Joomla заключается в том, что Joomla имеет Bootstrap 2 в своей основе. Решение Bootstrap 3 очень простое, просто добавьте класс начальной загрузки и frameborder = "0"!

Отзывчивый 16: 9 YouTube

<div class = "embed-responseive embed-responseive-16by9">
<i-frame class = "embed-responseive-item" src = "// www.youtube.com/embed/zpOULjyy-n8?rel=0"> </ iframe>
</ DIV>

Отзывчивый 4: 3 YouTube

 <div class = "embed-responseive embed-responseive-4by3">
<i-frame class = "embed-responseive-item" src = "// www.youtube.com/embed/TQl_Sv3LztQ"> </ iframe>
</ DIV>

Отзывчивый 16: 9 Vimeo

<div class = "embed-responseive embed-responseive-16by9">
<i-frame src = "// player.vimeo.com/video/22428395"> </ iframe>
</ DIV>

Решение для онлайн-сервисов

Наш последний пример - самый простой из них. Пусть embedresponsively.com сделает всю работу за вас. Embedresponsively.com использует тот же метод, что и наше решение CSS и HTML, и теперь обслуживает несколько сервисов встраивания, таких как YouTube, Vimeo, GoogleMaps и другие. Просто добавьте ссылку на сайт, и Embedresponsively.com предоставит вам встроенную разметку для идеального адаптивного кода для встраивания!

<s-tyle> .embed-container {позиция: относительная; нижнее дно: 56,25%; высота: 0; переполнение: скрытое; максимальная ширина: 100%; }
 iframe контейнера .embed, 
.embed-контейнер объект, 
.embed-контейнер для встраивания 
{позиция: абсолютная; верх: 0; слева: 0; ширина: 100%; высота: 100%; }
</ Стиль>
<div class = 'embed-container'> <i-frame src = 'https: //www.youtube.com/embed/x76VEPXYaI0' frameborder = '0' allowfullscreen> </ iframe> </ div>

Адаптивные сайты высшего качества для всех видов деятельности. Цены на сайты устанавливаются ниже рыночных.

(988) 117-9188

ofiskmv@mail.ru

купить-сайт-в.рф

@

@

@