Адаптивное видео

При работе с сайтом достаточно часто приходится вставлять в код виде файлы. Таковы современные тенденции, «Лучше один раз увидеть, чем десять раз услышать, тысячу раз прочесть». Увы.

В Joomla последних версий и с современными шаблонами проблемы со вставкой на страницы видео (и картинок) нет, отображение всех элементов проистекает адекватно в «автоматическом режиме». Но на проектах без адаптивных шаблонов процесс приходится делать в «ручном режиме». Нудно, но иногда приходится это делать и, в принципе, всё просто (когда узнал — как).

На новых проектах при устновленном плагие JV AllVideos прописать видео элементарно. В иных случаях — видео из YouTube вставляется на сайт с применением тэга iframe (либо с помощью тэга embed). На данной странице мы «не ищем простых путей» и тупо заимствуем код с YouTube (замечательный видеоклип Группа Ноль — Человек и Кошка):

<iframe width="560" height="315" src="https://www.youtube.com/embed/E-H3Vxm7p80" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>

Сам клип установленный на этом сайте «втупую» — адаптивным не будет, т е. при изменении размеров браузера, видео не будет уменьшатся:

Для того чтобы сделать видео из YouTube адаптивным, нужно сделать некоторые манипуляции:

Вставить тэг iframe с видео в

<div class="myvideo">...</div>

то есть прописать:

<div class="myvideo">
<iframe width="560" height="315" src="//www.youtube.com/embed/kPYBn8VcdXk" frameborder="0" allowfullscreen></iframe>
</div>

В файл стилей css прописать примерно такой код:

.myvideo {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
}
.myvideo iframe,.myvideo object,.myvideo embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

После этого наше видео с «порошком целебным» — станет адаптивным:

Малоприятная процедура. Но иногда бывает необходимость. Старые проекты, неадаптивные шаблоны, пр.

При необходимости/желании придется ввести еще один див, итожим:

<div style="width:80%; margin:0 auto;">
<div class="myvideo">
<iframe width="560" height="315" src="//www.youtube.com/embed/kPYBn8VcdXk" frameborder="0" allowfullscreen></iframe>
</div>
</div>

Задать ширину, отцентрировать. Можно еще повозиться с css, но на-фиг. Юзайте, совграждане, современные CMS и скрипты, меньше проблем.

Зачем этот текст: дабы не «изобретать» методу заново и не гуглить больше. Думать или вспоминать каждый раз настолько лень, что проще — записать.

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


Планируете проект?

Заполните форму, наш специалист свяжется с вами для консультации (бесплатно), составит для вас персональное предложение.

Как к вам обращаться?
Сообщите корректный адрес электронной почты.
Не корректный номер.
Опишите кратко суть задачи: *
Необходимо подтвердить согласие с Политикой.

Планируете создание веб проекта?

Заполните форму и наш специалист свяжется с вами для консультации и составит для вас персональное предложение.

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

Разработка сайтов «под ключ» любой сложности и назначения!

Обращаем ваше внимание на то, что данный интернет-сайт носит исключительно информационный характер и не является публичной офертой, определяемой положениями Статьи 437 (2) Гражданского кодекса РФ. Для получения подробной информации о стоимости указанных услуг, пожалуйста, обращайтесь по телефону: +7(916) 107-51-99 или через Форму обратной связи. Политика конфиденциальности / Соглашение об обработке персональных данных.

©2010–2022 веб-лаборатория «Reklama-No» | Создание, поддержка и продвижение сайтов