Онлайн заработок, создание и монетизация сайтов, веб-разработка, SEO и SMO продвижение, фриланс, партнерки, полезные сервисы вебмастерам, блоггинг.

Главная » Web разработка » Как вставить видео c Youtube на сайт (HTML, CMS, адаптивность)

Вставка видео на сайт с Youtube и не только

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

Именно поэтому сегодня я хочу рассмотреть несколько нюансов по вставке видео на сайт с Youtube и похожих сервисов. Часть инфы в начале пригодится новичкам, а в конце текста найдете один прием для верстки. Разделы статьи:

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

Начнем с самого глобального и универсального метода. Практически в каждом видеохостинге рядом с роликом должна быть форма, позволяющая поделиться им с другими пользователями. В ютубе она выглядит следующим образом:

Как вставить видео с Youtube

На этой странице вы можете:

  1. Определиться с методом распространения ролика: социальные сети, вставить видео на сайт в HTML формате (что нам и нужно) либо отправить его по почте.
  2. При клике на второй пункт увидите специальный HTML код для вставки видео на сайте.
  3. На третьем шаге выбираете размер — есть парочка форматов по умолчанию (640х360, 560х315 и т.п.), но также разрешается задавать и свои значения.
  4. По желанию включаете доп.параметры: показ названия, панели управления и похожих видео.

То есть все, что вам нужно сделать, это скопировать код соответствующего ролика и добавить его в требуемое место.

<iframe width="640" height="360" src="https://www.youtube.com/embed/KiS8rZBeIO0" frameborder="0" allowfullscreen></iframe>

Если у вас в проекте имеется определенная админка, то используйте ее встроенный текстовый редактор. В противном случае придется редактировать непосредственно HTML страницу (через Notepad++ или Sublime Text и т.п). Реализацию первого варианта можете посмотреть ниже на примере с Вордпресс.

Пару слов о теге Iframe, который применяется чтобы вставить видео на сайт в HTML с Ютуба. Здесь есть следующие параметры:

  • width — ширина блока;
  • height — высота;
  • src — ссылка на Youtube видео;
  • frameborder — отображение рамки/границы у фрейма;
  • allowfullscreen — поддержка полноэкранного режима.

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

Вставка видео в WordPress и не только

Теперь рассмотрим самый простой способ как вставить видео с Youtube на сайт WordPress. Данную систему использует большинство блогов и не только. Сначала пару слов о реализации через текстовый редактор, о чем я говорил выше, а потом покажу вариант с HTML.

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

Чтобы вставить видео на сайт W

  1. Заходите в админку своего веб-проекта и выбирайте добавление/редактирование записи.
  2. Затем в текстовом редакторе просто размещаете ссылку на Youtube видео.
  3. В 99% случаев система автоматически преобразует линк (как показано на гифке ниже).

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

Интересно, что в последних версиях CMS данный прием работает в обеих режимах редактора. В «Визуальном» вы можете сразу увидеть преобразование, а в HTML подмена линка на видео будет видна при сохранении и просмотре опубликованной записи.

Возможно, в других системах такой функции нет, и придется использовать вариант с HTML. В таком случае для вставки видео с Youtube на сайт Joomla будь то или Вордпресс, или любая другая CMS вам нужно:

  1. Зайти в текстовый редактор в режим HTML.
  2. Скопировать код из ютуба в область контента.
  3. Сохранить страницу/запись в том же HTML режиме.

Dставка видео в WordPress в HTML режиме

Иногда такой подход удобнее, если надо подправить некоторые параметры тега, например, размер плеера. Кроме всего прочего лично я добавляю абзацу с роликом выравнивание по центру. 

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

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

Чтобы реализовать адаптивное видео на сайте вставляете HTML код с Ютуба, Vimeo и любого другого сервиса внутрь нового DIV:

<div class="adaptive-wrap">
   <iframe width="640" height="360" src="https://www.youtube.com/embed/KiS8rZBeIO0" frameborder="0" allowfullscreen></iframe>
</div>

Затем в стилях прописываете:

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

Тут есть 2 нюанса:

  • Если плеер добавляется через object и embed, то для них также задаете аналогичные стили как с iframe.
  • В первом селекторе стилей параметр padding-bottom: 56.25%; соответствует пропорциям ролика 16:9, если нужен формат 4:3 — используйте значение 75%.

Код проверял, все работает. Данных трех примеров как вставить видео с Youtube на сайт вам должно хватить с головой. Будут какие-то вопросы — пишите в комментариях. Возможно, позже дополню пост, если найду новую инфу.

03.06.17

Категории: Web разработка, WordPress.

Теги: , , , , , ,

2 Comments
  1. Seoonly.ru

    Только плагины только хардкор!

  2. Tod

    Seoonly, уже не актуально) хотя, уверен, некоторые новички так все еще делают.

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

Ваш e-mail не публикуется. Обязательные поля помечены *
Если вы комментируете впервые, то текст будет отправлен на модерацию.