Как вставить видео с ютуба на сайт html

В нашу техническую поддержку присылают очень много вопросов, касательно того, как самостоятельно добавить тот или иной декоративный функционал в шаблон Moguta. В прошлой статье мы рассказали как добавить видео в фон сайта, а в этой, основываясь на ваших пожеланиях, мы расскажем, как добавить видео на страницу сайта.

Как вставить видео на сайт

Вставить видео на сайт очень просто. Всё, что нам понадобится — это несколько HTML строк.

Итак, мы разберем несколько способов вставки видео на сайт:

1. Вставить с помощью HTML
2. Вставить видео с Youtube
3. Как вставить видео с Rutube. Vimeo и прочих сайтов
4. Как вставить видео в шаблон Moguta

Как вставить видео средствами HTML

video> source src hljs-attribute»>uploads/video.mp4″ type = ‘video/mp4; codecs=»avc1.42E01E, mp4a.40.2″‘> video/ogg; codecs=»theora, vorbis»‘> video/webm; codecs=»vp8, vorbis»‘>

Вставить видео с Youtube

Для того, чтобы вставить видео с сайта Youtube необходимо:

Как добавить видео с ютуба на сайт HTML?

1. Воспользоваться кнопкой «Поделиться», которая находится сразу под роликом;
2. Выбрать вкладку «HTML-код»;
3. Скопировать сгенерированный код;
4. Вставить скопированный код на сайт;
5. Через атрибуты «width» и «height» настроить высоту и ширину блока видео, если это необходимо;

Как вставить видео с Rutube. Vimeo и прочих сайтов

Алгоритм вставки видео с различных видеосервисов такой же, как с Youtube.

1. Нажать кнопку «Поделиться» или «Share»;
2. Вставить сгенерированный код к себе на сайт;
3. При необходимости стилизовать блок с видео;

Как стилизовать блок с видео

Во-первых, у тега video есть несколько атрибутов:

1. autoplay — Видео начинает воспроизводиться автоматически после загрузки страницы.
2. controls — Добавляет панель управления к видеоролику.
3. height — Задает высоту области для воспроизведения видеоролика.
4. loop — Повторяет воспроизведение видео с начала после его завершения.
5. poster — Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
6. preload — Используется для загрузки видео вместе с загрузкой веб-страницы.
7. src — Указывает путь к воспроизводимому видеоролику.
8. width — Задает ширину области для воспроизведения видеоролика.

Во-вторых, код с видео можно обернуть в отдельный div и использовать CSS для стилизации

Как вставить видео в шаблон Moguta

Рассмотрим на примере вставки видео в форму обратной связи. Вставим первое видео на всю ширину контейнера, а второе отцентруем.

Адаптивное видео с YouTube правильно (HTML, CSS, JS)

1. Через административную панель заходим Настройки — Шаблон;
2. Выбираем файл страницы, на которой хотим вставить видео;
3. Вставляем код в нужное место;
4. Добавляем второе видео в div и добавляем ему ширину, равную ширине видео, а также автоматические внешние отступы;

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

Источник: moguta.ru

Как вставить видео в WordPress c Youtube + хак для адаптивности

Недавно нашел интересный хак, который позволяет автоматически вставлять адаптивное Youtube видео в WordPress, и я решил написать про него небольшой пост. Сам сниппет достаточно простой, поэтому попутно расскажу о других нюансах, возникающих при добавлении видеороликов в качестве контента в Вордпресс. Причем рассмотрю как работу со старым редактором (который многие все еще юзают), так и с новым. Есть вероятность, что во втором случае хак может не пригодиться, но без дополнительных CSS/HTML все равно не обойтись.

Простая вставка видео с Youtube в WordPress

Прошлая версия текстового редактора имела одну интересную и полезную для новичков фишку – вы могли просто вставить URL-адрес ролика с Ютуба и система автоматически преобразовывала его в видео. Приблизительно вот так:

Даже когда пользователь добавляет ссылку в HTML режиме, то данная опция все равно срабатывает, хотя результат и виден только после сохранения страницы/записи.

В новом редакторе Gutenberg работать с видео, казалось бы, тоже достаточно легко, но у мня почему-то не получается. Итак, мы выбираем в блоках вкладку «Вставки», где находим пункт «Youtube». Далее в специальное поле просто указываем линк на нужный видос.

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

Универсальное добавление Youtube видео через HTML

Метод подходит для любых сайтов, причем не только на Вордпресс. Принцип работы такой:

1. Внизу под видеороликом с Ютуба (и других сервисов) вы можете найти ссылку «Поделиться», при клике на которую появится всплывающее окно с разными вариантами шеринга.
2. Вам нужен самый первый под названием «Встроить» – после нажатия появится окно с HTML-кодом интеграции на сайт и некоторыми настройками.
3. Просто копируете приведенный здесь HTML-код и внедряете его на свой веб-ресурс.

Чтобы вставить видео в старый редактор обязательно надо переключиться в «HTML» режим. После этого при желании можно вернуться в «Визуальный» – видео подгрузится автоматически.

В Gutenberg`е для этой задачи используется блок «HTML-код» из группы «Форматирование». На странице появится специально поле, куда следует добавить скопированный с Youtube код. Все предельно просто.

Адаптивное видео c Youtube на WordPress

Наконец-то мы дошли до основной темы статьи. В начале немного общей «теории». Чтобы получить адаптивность видеоролика с Ютуба вам нужно сделать 2 вещи:

1. Во-первых, надо «обернуть» код вставки внешним DIV блоком, например:

2. Во-вторых, потребуется дополнить файл стилей следующими строками:

.youtube { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Как вставить видео в материал Joomla

Вариант по-старинке — это вставка видео из Youtube прямо в материал или модуль Joomla.

Для этого нужно сделать следующее:

Первым делом нужно разрешить использование тега iframe, чтобы он не обрезался редактором.
Переходим в Менеджер расширений — Плагины. Можете сразу отфильтровать их по типу «editors».
И находим среди них плагин «Редатор — TinyMCE».

Если у вас новая версия Joomla (3.7+), то в настройках редактора будут предустановленные настройки (сеты) для разных групп пользователей.
Нам нужен Set 0 (для админов). Выбираем его и спускаемся ниже.

Находим опцию «Use Joomla Text Filter» (использовать фильтр для текста) и включаем её.
Тег iframe из списка запрещённых можно не удалять.

Здесь для группы «Супер-пользователи» (или для той которая вам нужна), выбираем No Filtering, т.е. без фильтрации.
Сохраняем.

Открываем материал Joomla, переходим в режим HTML (исходный код, это кнопка со значком <>)

и в нужном месте статьи вставляем скопированный код.

После этого на странице материала появиться видеоролик из Youtube.

Вставка из Youtube (вариант по-проще)

Делаем всё также как в первом варианте: пункты 1 и 2. Разрешаем использование iframe.

Далее копируем не HTML код видео плеера, а просто ссылку на видео.

Далее переходим в материал Joomla, ставим курсор мыши в нужное место статьи и жмём на кнопку «Видео»

Появиться вот такое окно, где в поле «Источник» вставляем скопированную ссылку из Ютуб.
Размер подставляется автоматически.

Таким же образом, на вкладке «Код для вставки»можно вставить и код видеоплеера в теге iframe. Чтобы не переходить в исходный код статьи.

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

Недостаток, если его можно так назвать в том, то что нужно копировать и вставлять код в статью в режиме HTML (в варианте по-проще можно вставить через кнопку), и слегка изменять настройки редактора (выключая фильтрацию).
Лично я использую вариант по-старинке.
Привык)

Вставка роликов с других видеосервисов

Таким же образом вставляются видео из других видео хостингов, например Vimeo.com
Суть та же. Копируете код для вставки и вставляете его в статью или модуль Joomla.

Иногда сервисы могут предлагать вставку кода через тег object, который тоже запрещён в настройках редактора Joomla. В этом случае, если вы выключаете фильтрацию текста для суперадмина, то код с object тоже вставиться без проблем.

Вставка видео с собственного сайта

Это вариант когда видео хранится прямо на вашем сайте, в виде файла .mp4 или в другом формате.

Здесь тоже есть два варианта: вставить напрямую или вставить через специальный плагин.
Рассмотрим оба.

Вариант 1. Напрямую.

Допустим, вы загрузили ваш файл с видео в папку images и называется он — video.mp4

Можно вставить его вручную, используя тег video

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

Или же можно вставить проще, через кнопку «Видео».

В поле источник указав путь до видеофайла, например: images/video.mp4
И при необходимости можно указать размеры ролика.

Тег video поддерживается большим количеством браузеров, единственное, что некоторые браузеры поддерживают не все форматы видео.

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

Но недостатков больше.

1. Увеличивается нагрузка на ваш хостинг и на интернет-канал хостинга. Особенно это заметно когда видео просматривают сразу несколько десятков пользователей.
   Например, если ваше видео будут одновременно просматривать 20 человек, то вся ширина канала хостинга будет поделена между ними.
   Таким образом видео будет загружаться медленно и постоянно прерываться.
2. Некоторые браузеры могут поддерживать не все форматы видео.
3. Если у вас много видео, то они будут занимать большой объём на хостинге.
4. При вставке видео в статью, нужно каждый раз указывать путь до него, это не совсем удобно.

Вариант 2. Через плагин AllVideos.

Также для Joomla есть специальный плагин для проигрывания видео- и аудио- файлов.
Это плагин AllVideos, скачать его можно на официальном сайте разработчика >>

После установки и настройки плагина, для вставки видео можно использовать упрощённый код:

myvideo

Где myvideo — это название ролика в формате mp4.

Таким же образом можно вставлять и аудиоролики.

Преимущества вставки видео через плагин:

• он поддерживает много различных видеоформатов и видео может проигрываться практически на любых устройствах.
• то, что это ваше видео и никто не может запретить его воспроизведение или удалить.
• вставлять немного проще, чем в прошлом варианте. Достаточно указать только имя файла, заключив его в теги, указывающие на его формат.

Недостатки почти такие же:

• замедление загрузки сайта и самого видео при большой посещаемости
• на сайте занимается большой объём места под видео
• дополнительное стороннее расширение с подгрузкой своих яваскриптов.

Вставка видео с Youtube через плагин

Также при помощи плагина AllVideos можно вставлять ролики из Youtybe и многих других сервисов.

Делается это при помощи такой записи:

xhty9934wk

Где xhty9934wk — это короткая ссылка на ролик из YouTube

Итог

Какой способ выбрать, решайте исходя из задач перед вашим проектом.

Если нужна быстрая скорость загрузки и не хочется тратить место на хоcтинге — то однозначно Youtube или подобные сервисы.

Если у вас всего пара видео и небольшая посещаемость, или нужно встраивать видео, которое могут заблокировать в сервисах, то тогда размещайте его на своём сайте и вставляйте через плагин или напрямую через тег video.

Источник: joomlatown.net