Как вставить HD видео с 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. <div>

  2. <div>

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

  4. </div>

  5. </div>

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Назначим выше сформированному блоку <dιv> пропорции размера, соответствующие формату, который определен атрибутами ширины и высоты тега <iframe> (width="560",). Нетрудно подсчитать, что эти пропорции соответствует стандартному формату видео 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.

Для увеличения / уменьшения размера изобр

rabota-vinete.ru

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

Недавно я задался вопросом, неужели нельзя принудительно включить хорошее качество в встраиваемых видео с ютуба? Так как начало бесить, что ролики которые вставляются на сайт имеют не лучшее качество, иногда youtube выбирает такое ужасное качество, что приходится выбирать самому в каком качестве я хочу смотреть. :) Конечно логически youtube прав, и качество видео выбирается исходя из скорости моего интернет соединения, но сейчас не то время что бы смотреть видео в качестве 360p, да и я избалован HD 1080 видео (ну или хотя бы hd 720). Вот инструкция как принудительно включить нужное Вам качество.

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

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

Для начала берем код для вставки видео:

<iframe src="//www.youtube.com/embed/Q_pm9teaSpM" frameborder="0" allowfullscreen></iframe>

и что бы принудительно включить другое качество, добавляете в конец ссылки, то качество которое вам нужно:

<iframe src="//www.youtube.com/embed/Q_pm9teaSpM?rel=0&vq=hd1080" frameborder="0" allowfullscreen></iframe>

Вот и все смело вставляете видео на сайт и оно будет в таком качестве, в котором вы указали, ниже я добавил на всякий случай остальные коды:

Код для 1080: &vq=hd1080Код для 720: &vq=hd720

Код для 480p: &vq=largeКод для 360p: &vq=mediumКод для 240p: &vq=small

А в качестве примера, вот видео в HD (1080) качестве:

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

24 оценок, Средняя оценка: 5 из 5

mindwork.su

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

Привет всем!

Сегодня я покажу вам, как вставить видео на сайт с YouTube. Данный сервис является самым посещаемым видеохостингом в мире, поэтому речь в этой статье пойдет именно о нем.

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

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

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

1. Ну, самым, наверное, распространенным случаем среди веб мастеров, является запись собственных уроков с экрана монитора для наглядной демонстрации посетителям. Записал урок, загрузил на видеохостинг YouTube, выложил в блог, а пользователь, просмотрев его, сможет воспроизвести увиденное на своем сайте. Знаете, как загрузить видео на сервис Ютуб? Если нет, ознакомьтесь с этим постом.

2. Видеоролики, красующиеся в постах, делают ресурс краше и интереснее для посетителей.

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

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

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

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

1. Для выбора ролика перейдите на сервис Ютуб по этой ссылке. Найдите подходящую запись и нажмите ссылку «Поделиться»:

как вставить видео на сайт с youtube-1

2. Ниже нажмите HTML — код для ее отображения:

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

3. Не спишите сразу копировать ссылку. В самом низу, как видно из скриншота, есть пункт «Использовать старый код». Я рекомендую вам установить в нем галочку, в противном случае, существует вероятность того, что запись не будет отображаться на странице вашего сайта, т.к. «движок» wordpress порой конфликтует с тегом «<iframe>».

В старом коде данный тег заменяется тегом «<object>», с которым wordpress не конфликтует:

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

Галочку в пункте «Включить режим повышенной конфиденциальности» устанавливать не нужно.

4. Далее, что необходимо сделать, это подогнать масштаб видео под шаблон вашего блога. Размер видео по умолчанию установлен 560×315, вы же можете выбрать более подходящий размер из предложенных вариантов или любой другой:

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

Также можно поменять размеры в самом коде видео, исправив значения «widht» (ширина) и «height» (высота) по своему усмотрению.

5. И теперь остается скопировать отредактированный код, перейти в административную панель ресурса во вкладку «Записи». Зайти в режим «HTML» (в новых версия wordpress — «Текст») и вставить код в запись:

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

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

И последний нюанс, о котором хочется сказать. При вставке данного кода, видео будет прижато к левому краю страницы. Чтобы видео отображалось по середине, заключите весь сгенерированный код в тег <center>:

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

После этого видео аккуратненько впишется в страницу вашего поста:

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

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

Как вам статья? А вы знали, как вставить видео? Может вам известен более простой способ? Жду ваших комментариев!

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

blogiseo.ru