Вставляем видео с YouTube на сайт
Здравствуйте, уважаемый посетитель!
Сегодня мы затронем еще один вопрос оформления контента и посмотрим, как можно вставить видео с YouTube на сайт.
Надо сказать, что хостинг YouTube с огромным количеством размещенных на нем видеоматериалов сейчас очень популярен. И использование его возможностей, несомненно, сможет в определенной степени повысить интерес пользователей к содержанию сайта.
При этом не надо забывать и о соблюдении требований авторских прав. Поэтому в данном случае мы рассмотрим вариант размещения видео с использованием функциональных возможностей, предлагаемых самим сервисом YouTube, а именно: с помощью стандартного видеоплеера YouTube. Что в соответствии с Условиями использования YouTube позволяет легально использовать этот сервис на своем сайте.
скриншот 29
Однако, следует учесть, что предоставляемый сервисом YouTube HTML-код видеороликов предусматривает применение контейнера
Поэтому здесь будет показан не совсем ординарный, но достаточно простой способ использования стилей CSS. С помощью которого несложно будет решить эту проблему и отображать видео с YouTube с учетом резиновой верстки на всем диапазоне, который для нашего сайта составляет 320px÷1920px.
Содержание
- Получаем с YouTube нужный видеоролик
- Вставляем HTML-код видео в оформляемую страницу
- Встраиваем видеоплеер YouTube с помощью стилей CSS
- Исходные файлы сайта
Получаем с YouTube нужный видеоролик
Как и ранее при создании сайта мы всегда стараемся использовать только легальные методы. И в данном случае мы не станем "по черному" скачивать видео и показывать его на своем сайте с помощью каких-либо сторонних видеоплееров. Так как такие действия, в случае отсутствия предварительного письменного разрешения YouTube, нарушают подпункт A пункта 5.1 Условия использования YouTube.
скриншот 30
Можно, конечно, пойти и по сложному пути, пытаясь все же получить с согласия авторов такое письменное разрешение с определенными условиями его выполнения. Но стоит ли себе искать такие дополнительные приключения, если имеется достаточно простой, разрешенный этим сервисом способ - использование видеоплеера YouTube.
Причем в этом случае не нарушаются авторские права обладателей видео, так как для такого показа будут доступны только те продукты, владельцы которых не против встраивания их на другие сайты. А это относится к подавляющему большинству имеющихся на хостинге видеороликов.
Ну а теперь посмотрим, как это практически сделать на примере размещения следующей статьи сайта - "Статистика угонов за 1916 год". Где в первом разделе предусматривается использование видео по основной теме статьи. Ее HTML-код можно посмотреть в разделе Исходные файлы сайта в прилагаемых дополнительных материалах в файле "/articles/stati/statistika-ugonov-2016.php."
Для этого с начала откроем главную страницу YouTube и после поиска по нужной тематике найдем возможные варианты видео, как показано ниже на скриншоте.
скриншот 18
Рис.1 Подбор в YouTube видео нужной тематики
После того, как мы просмотрим и выберем для вставки в оформляемую статью наиболее подходящий видеоролик, через кнопку "Поделиться" в открытой вкладке выберем опцию "Встроить".
Рис.2 Выбор во вкладке Поделиться опции Встроить
Ну а теперь осталось лишь только обычным способом скопировать HTML-код выбранного видеоролика.
Рис.3 Копирование HTML-кода видеоролика
Таким образом мы получили HTML-код видео, который нужно вставить в оформляемую страницу.
Рис.4 HTML-код видео с YouTube
В дополнение можно отметить, что получить HTML-код можно и другим способом. Для этого достаточно кликнуть правой кнопкой мыши по видео и в открывшемся окне выбрать опцию "Копировать HTML-код", как показано на следующем скриншоте.
Рис.5 Копирование HTML-кода другим способом
Правда, в этом случае в теге
Вставляем HTML-код видео в оформляемую страницу
Для того, чтобы иметь возможность отображать встраиваемое видео однотипно с используемыми в контенте изображениями, применим типовое решение по размещению графических элементов. При котором видеоплеер будет располагаться по центру с размером в 60% от ширины области контента (в предыдущей статье для этого типа мы определили класс "img-center60").
А кроме того, для возможности стилизовать плеер для работы в режиме резиновой верстки, поместим полученный HTML-код в дополнительный блок-обвертку
-
class="img-center60">class="video-pleer">
Рис.6 HTML-код видео с YouTube
Если теперь открыть страницу с добавленным HTML-кодом, то можно увидеть, что видеоплеер поместился, как и предполагалось, в центре области контента. Однако, его размер не соответствует тому, каким он должен быть при нормальном отображении графических элементов.
Это обусловлено тем, что, как ранее отмечалось, в теге
К чему это приводит, можно увидеть на следующих скриншотах, где показаны варианты отображения видеоплеера при разных разрешениях экранов.
Рис.7 Вид видеоплеера с фиксированной шириной при разрешении 1920px.
Рис.8 Вид видеоплеера с фиксированной шириной при разрешении 1280px.
Как видно, такое отображение видеоплеера не может нас устроить. Поэтому для того, чтобы это исправить, сделаем некоторые преобразования.
Встраиваем видеоплеер YouTube с помощью стилей CSS
Для того, чтобы совместить встраиваемый видеоплеер с резиновой версткой сайта используем возможности, которые предоставляют свойства CSS. Так для блока-обвертки
-
Из тега
с классом "img-center60" сформируем пустой элемент с относительным позиционированием relative, в который в дальнейшем разместим полученный с YouTube видеоплеер, представленный в виде тега При этом высота его будет определяться не свойством height, а внутренним отступом, в данном случае padding-bottom.
-
Назначим выше сформированному блоку
пропорции размера, соответствующие формату, который определен атрибутами ширины и высоты тега
А для полученного с YouTube контейнера
-
Ширину и высоту тега
Это необходимо для того, что бы размер видеоплеера в дальнейшем определялся не фиксированными значениями ширины и высоты, а соответствовал размеру родительского блока. Который в свою очередь, помещенный в типовой контейнер
с классом "img-center60" при использовании резиновой верстки подстраивался по ширине в зависимости от разрешения экрана. -
Кроме того назначим тегу
В итоге все эти действия можно описать следующей таблицей стилей CSS:
-
.video-pleer {
-
height: 0;
-
overflow: hidden;
-
position: relative;
-
padding-bottom: 56.25%;
-
}
-
.video-pleer iframe {
-
height: 100%;
-
width: 100%;
-
position: absolute; top: 0; left: 0;
-
}
Рис.9 CSS-код для встраивания видеоплеера YouTube
Как видно, CSS-код получился довольно компактным без каких-либо излишеств.
Ну а теперь осталось проверить, как после внесенных дополнений в таблицу стилей CSS сайта, находящуюся в файле "main.css", будет вести себя стилизованный видеоплеер YouTube.
Рис.10 Вид стилизованного видеоплеера при разрешении 1280px.
Рис.11 Вид стилизованного видеоплеера при разрешении 1920px.
Как видно, теперь встроенный видеоплеер принимает нужный размер при любых разрешениях экрана, находящихся в допустимых пределах диапазона резиновой верстки. И по размерам ничем не отличается от размещенных в контенте изображений.
При этом следует подчеркнуть, что он обладает всеми функциональными возможностями, которые присуще видеоплееру YouTube, включая режим "Во весь экран", регулировку громкости, скорости просмотра и другие его настройки.
На этом мы закончим рассмотрение основных вопросов оформления контента сайта в части, касающейся размещения статей. Все остальные вопросы по наполнению сайта необходимым содержанием и функционалом будут рассмотрены в других разделах Сборника статей.
Исходные файлы сайта
Исходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов:
- Файлы каталога www
- Таблицы базы данных MySQL
Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.
Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму.
Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.
С уважением,