Заметки на полях
Задать  вопрос
Написать  отзыв

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

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

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

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

Для комментирования материалов регистрация на сайте не нужна. Правила публикации: наличие здравого смысла. Спам удаляется, спамерам: бан по ip навсегда. Email комментаторов не публикуется.

Как заказать услугу? Веб-студия «Реклама-Но!»

Заказать услугу, рассчитать стоимость работ или уточнить дополнительную информацию вы можете: оставив заявку на сайте (через формы обратной связи), или позвонив нам по указанным на сайте контактным телефонам, или же написать нам на почту. Будем рады ответить на все интересующие вопросы!

  Наш телефон:
или:
Оставьте свой номер телефона и наш специалист свяжется с вами в ближайшее время.

  Наш адрес: Россия, Москва, Слесарный переулок, д. 3
  Электронная почта: [email protected] или Форма обратной связи

Звоните нам и мы решим любые проблемы с вашим сайтом или задачи по его созданию.

Если есть вопросы по разделу:

Задайте вопрос и мы быстро на него ответим!

Ваше имя:*

Электронная почта:*

Тема сообщения:

Текст вопроса:*


Разработка сайтов под ключ

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


Не забудьте, что у нас:

=