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

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

В 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 и скрипты, меньше проблем.

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

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


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

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

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

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

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

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

Получите бесплатную консультацию прямо сейчас!

Веб-студия «Reklama-No» специализируется на разработке сайтов для бизнеса. Для реализации задач вашего будущего/существующего сайта — мы подберем оптимальные решения. Подробно расскажем об особенностях создания веб-ресурса вашей тематики, попробуем ответить на все интересующие вас вопросы максимально полно, доступным языком, оперативно.
Мы понимаем желания/сомнения/проблемы наших клиентов и готовы дать полезные советы по работе с сайтом, опираясь на собственный много-много летний опыт.
Звоните нам и мы решим любые проблемы с вашим сайтом или задачи по его созданию. Хотя, лучше звоните сами.


+7(916) 107-51-99

Обсудите ваш проект со специалистом!

Оставьте свои контакты

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

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

Обращаем ваше внимание на то, что данный интернет-сайт носит исключительно информационный характер и не является публичной офертой, определяемой положениями Статьи 437 (2) Гражданского кодекса РФ. Для получения подробной информации о стоимости указанных услуг, пожалуйста, обращайтесь по телефону: +7(916) 107-51-99 или через Форму обратной связи. Политика конфиденциальности / Соглашение об обработке персональных данных. This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

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