WordPress позволяет легко вставлять видеоролики YouTube в текст записей и статических страниц. Для этого достаточно просто вставить ссылку на видео в визуальном редакторе или в редакторе кода. Однако такой способ не позволяет подогнать ширину видеоролика под размер области контента. Далее я расскажу о том, как это можно сделать.
Хочу сразу отметить, что для работы приведённого ниже кода к вашему сайту должна быть подключена библиотека Twitter Bootstrap.
Код вставки выглядит следующим образом:
Можете просто скопировать его и вставить в редакторе кода нужной вам записи или статической страницы, заменив тег iframe в 4 строчке на HTML-код вставки видео YouTube, который можно получить на странице видеоролика. Для этого нужно нажать на кнопку Поделиться, а затем перейти на вкладку HTML-код в появившейся панели:
Как сделать адаптивным видео с YouTube?
Если видеоролик имеет соотношение сторон 4:3, замените класс embed-responsive-16by9 элемента div в 3 строчке на embed-responsive-4by3 . Значения параметров width и height элемента iframe влияют на отображение видеоролика только в визуальном редакторе WordPress.
После вставки в редакторе кода, добавленный видеоролик должен отобразиться и в визуальном редакторе, а вот так он будет выглядеть на странице сайта:
Скажу ещё, что в своём блоге я использую плагин Bootstrap 3 Shortcodes, который добавляет возможность использования шорткодов Twitter Bootstrap, поэтому код вставки видео у меня выглядит следующим образом:
[row] [column md=»12″] [embed-responsive ratio=»16by9″]
[/embed-responsive] [/column] [/row]Источник: riselab.ru
Гибкое видео или Responsive Video
Случается, что необходимо вставить видео на сайт, но при вставке кода он имеет заданные ширину и высоту, это не есть хорошо, особенно в век гибкого содержимого. Видео может быть обёрнуто в такие теги:
При этом если сайт имеет, например, определённую ширину то видео будет залазить за края
Обычно мы делаем так:
Если имеем дело с html5 видео, то приводим все в порядок через CSS
video
И все бы ничего, но мы разобрались только с html5 видео, а как же быть с iframe?
После добавления CSS для iframe
iframe
Как предложил еще в далеком 2009 году Thierry Koblentz свое решение данного вопроса и сделал он это так:
Оборачиваем наш iframe в div и назначим ему класс, например, .videoWrapper. Добавляем стили для класса и iframe
.videoWrapper < position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; >.videoWrapper iframe
Уаля, так-то лучше, получаем видео 16:9 и с нормальным height.
Источник: coderteam.ru
Адаптивное видео
При работе с сайтом достаточно часто приходится вставлять в код виде файлы. Таковы современные тенденции, «Лучше один раз увидеть, чем десять раз услышать, тысячу раз прочесть». Увы.
В Joomla последних версий и с современными шаблонами проблемы со вставкой на страницы видео (и картинок) нет, отображение всех элементов проистекает адекватно в «автоматическом режиме». Но на проектах без адаптивных шаблонов процесс приходится делать в «ручном режиме». Нудно, но иногда приходится это делать и, в принципе, всё просто (когда узнал — как).
На новых проектах при устновленном плагие JV AllVideos прописать видео элементарно. В иных случаях — видео из YouTube вставляется на сайт с применением тэга iframe (либо с помощью тэга embed). На данной странице мы «не ищем простых путей» и тупо заимствуем код с YouTube (замечательный видеоклип Группа Ноль — Человек и Кошка):
Сам клип установленный на этом сайте «втупую» — адаптивным не будет, т е. при изменении размеров браузера, видео не будет уменьшатся:
Для того чтобы сделать видео из YouTube адаптивным, нужно сделать некоторые манипуляции:
Вставить тэг iframe с видео в
то есть прописать:
В файл стилей 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%;
>
После этого наше видео с «порошком целебным» — станет адаптивным:
Малоприятная процедура. Но иногда бывает необходимость. Старые проекты, неадаптивные шаблоны, пр.
При необходимости/желании придется ввести еще один див, итожим:
Задать ширину, отцентрировать. Можно еще повозиться с css, но на-фиг. Юзайте, совграждане, современные CMS и скрипты, меньше проблем.
Зачем этот текст: дабы не «изобретать» методу заново и не гуглить больше. Думать или вспоминать каждый раз настолько лень, что проще — записать.
Добавить комментарий
Для комментирования материалов регистрация на сайте не нужна. Правила публикации: наличие здравого смысла. Комментарии проходят премодерацию и публикуются только после проверки администратором.
Источник: reklama-no.ru