×

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо войти под своим аккаунтом через форму на главной панели.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

  • Рубрики
  • Слайдер
  • Сайдбар
  • Подписка
  • Вниз
  • Вверх
×
  • Как сделать сайт с нуля своими руками (вводная часть)

    1. Причины создания пошаговой инструкции по разработке самописного сайта
    2. Тема создаваемого сайта
    3. В чем будет заключаться монетизация
    4. Функционал
    5. Этапы создания
    6. Текущее состояние создаваемого сайта

    Здравствуйте уважаемый посетитель!

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

    Причем чтобы такой интернет-ресурс был создан не на каком-нибудь стандартном шаблоне бесплатной СMS (Content management system - система управления контентом) типа WordPress, Drupal, Joomla и т.п., а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

    Часто такие сайты, созданные под конкретные задачи на основе языка разметки веб-страниц HTML, стилей CSS и других инструментов веб-программирования (PHP, JavaScript и т.п.), называют самописными.

    Этой статьей начинается отдельная рубрика "Как сделать сайт с нуля своими руками", где на реальном примере, с предоставлением исходных материалов (программные коды, файлы и т.п.), будет показано, как действительно можно самостоятельно сделать рабочий сайт.

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

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

Самописный сайт своими руками!

Текущее состояние создаваемого сайта

Здесь можно посмотреть текущее состояние тестового самописного сайта, который создается в рамках цикла статей Сделай сайт с нуля своими руками.

Где в дополнительных материалах можно бесплатно скачать исходные файлы сайта с таблицами MySQL.

Вы здесь: Главная → Сборник статей → Контент → Вставляем видео с YouTube на сайт


Автор: / Дата:

Вставляем видео с YouTube на сайт

Здравствуйте уважаемый посетитель!

Сегодня мы затронем еще один вопрос оформления контента и посмотрим, как можно вставить видео с YouTube на сайт.

Надо сказать, что хостинг YouTube с огромным количеством размещенных на нем видеоматериалов сейчас очень популярен. И использование его возможностей, несомненно, сможет в определенной степени повысить интерес пользователей к содержанию сайта.

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

скриншот 29

Однако, следует учесть, что предоставляемый сервисом YouTube HTML-код видеороликов предусматривает применение контейнера <iframe> с фиксированными значениями ширины и высоты. Что несколько затрудняет использования такого видеоплеера при встраивании его на сайты с резиновой версткой.

Поэтому здесь будет показан не совсем ординарный, но достаточно простой способ использования стилей 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

Для увеличения / уменьшения размера изображения кликните по картинке
Подбор в YouTube видео нужной тематики

Рис.1 Подбор в YouTube видео нужной тематики

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

Для увеличения / уменьшения размера изображения кликните по картинке
Выбор во вкладке Поделиться опции Встроить

Рис.2 Выбор во вкладке Поделиться опции Встроить

Ну а теперь осталось лишь только обычным способом скопировать HTML-код выбранного видеоролика.

Для увеличения / уменьшения размера изображения кликните по картинке
Копирование HTML-кода видеоролика

Рис.3 Копирование HTML-кода видеоролика

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

  1. <iframe width="560" height="315" src="https://www.youtube.com/embed/ZRrxsFRszjg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Рис.4 HTML-код видео с YouTube

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

Для увеличения / уменьшения размера изображения кликните по картинке
Копирование HTML-кода другим способом

Рис.5 Копирование HTML-кода другим способом

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

Вставляем HTML-код видео в оформляемую страницу


Для того, чтобы иметь возможность отображать встраиваемое видео однотипно с используемыми в контенте изображениями, применим типовое решение по размещению графических элементов. При котором видеоплеер будет располагаться по центру с размером в 60% от ширины области контента (в предыдущей статье для этого типа мы определили класс "img-center60").

А кроме того, для возможности стилизовать плеер для работы в режиме резиновой верстки, поместим полученный HTML-код в дополнительный блок-обвертку <dιv> с классом "video-pleer". В итоге фрагмент HTML-кода для вставки видео с YouTube примет следующий вид.

  1. <div class="img-center60">

  2. <div class="video-pleer">

  3. <iframe width="560" height="315" src="https://www.youtube.com/embed/ZRrxsFRszjg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

  4. </div>

  5. </div>

Рис.6 HTML-код видео с YouTube

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

Это обусловлено тем, что, как ранее отмечалось, в теге <iframe> заданы фиксированные значения ширины и высоты. Что, естественно, не позволяет видеоплееру подстраиваться под нужный размер в зависимости от разрешения экрана.

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

Для увеличения / уменьшения размера изображения кликните по картинке
Вид видеоплеера с фиксированной шириной при разрешении 1920px

Рис.7 Вид видеоплеера с фиксированной шириной при разрешении 1920px.

Для увеличения / уменьшения размера изображения кликните по картинке
Вид видеоплеера с фиксированной шириной при разрешении 1920px

Рис.8 Вид видеоплеера с фиксированной шириной при разрешении 1280px.

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

Встраиваем видеоплеер YouTube с помощью стилей CSS


Для того, чтобы совместить встраиваемый видеоплеер с резиновой версткой сайта используем возможности, которые предоставляют свойства CSS. Так для блока-обвертки <dιv> выполним следующие действия:

  • Из тега <dιv> с классом "img-center60" сформируем пустой элемент с относительным позиционированием relative, в который в дальнейшем разместим полученный с YouTube видеоплеер, представленный в виде тега <iframe>.

    При этом высота его будет определяться не свойством height, а внутренним отступом, в данном случае padding-bottom.

  • Назначим выше сформированному блоку <dιv> пропорции размера, соответствующие формату, который определен атрибутами ширины и высоты тега <iframe> (width="560", height="315"). Нетрудно подсчитать, что эти пропорции соответствует стандартному формату видео 16:9 (560/35 : 315/35). При котором высота составляет 56.25% от ширины.

А для полученного с YouTube контейнера <iframe> с классом "video-pleer" определим:

  • Ширину и высоту тега <iframe> в относительных величинах со значением в 100% от родительского блока-обвертки <dιv>.

    Это необходимо для того, что бы размер видеоплеера в дальнейшем определялся не фиксированными значениями ширины и высоты, а соответствовал размеру родительского блока. Который в свою очередь, помещенный в типовой контейнер <dιv> с классом "img-center60" при использовании резиновой верстки подстраивался по ширине в зависимости от разрешения экрана.

  • Кроме того назначим тегу <iframe> абсолютное позиционирование absolute, тем самым определив местоположение видеоплеера внутри родительского блока-обвертки <dιv>, которому ранее присвоено относительное позиционирование relative.

В итоге все эти действия можно описать следующей таблицей стилей CSS:

  1. .video-pleer {

  2. height: 0;

  3. overflow: hidden;

  4. position: relative;

  5. padding-bottom: 56.25%;

  6. }

  7. .video-pleer iframe {

  8. height: 100%;

  9. width: 100%;

  10. position: absolute; top: 0; left: 0;

  11. }

Рис.9 CSS-код для встраивания видеоплеера YouTube

Как видно, CSS-код получился довольно компактным без каких-либо излишеств.

Ну а теперь осталось проверить, как после внесенных дополнений в таблицу стилей CSS сайта, находящуюся в файле "main.css", будет вести себя стилизованный видеоплеер YouTube.

Для увеличения / уменьшения размера изображения кликните по картинке
Вид стилизованного видеоплеера при разрешении 1280px

Рис.10 Вид стилизованного видеоплеера при разрешении 1280px.

Для увеличения / уменьшения размера изображения кликните по картинке
Вид стилизованного видеоплеера при разрешении 1920px

Рис.11 Вид стилизованного видеоплеера при разрешении 1920px.

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

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

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

Исходные файлы сайта


Знак папкиИсходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов:

  • Файлы каталога www
  • Таблицы базы данных MySQL

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо войти под своим аккаунтом через форму на главной панели.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

С уважением, Николай Гришин


Комментарии


Если у Вас возникли вопросы, или есть какие-либо пожелания по представлению материала, либо заметили какие-нибудь ошибки, а быть может просто хотите выразить свое мнение, пожалуйста, оставьте свои комментарии. Такая обратная связь очень важна для возможности учитывать в дальнейшем мнение посетителей.

Буду Вам за это очень признателен!

comments powered by HyperComments