Особливості вставки відео з youtube на комерційний сайт

  1. 1. Вставка відеоролика з youtube на сайт.
  2. 2. Об'єднання youtube роликів в плейлист.
  3. 3. Вставка декількох youtube-відео з одного плейлиста на сторінку.
  4. 4. Заміна картинки на youtube-відео.
  5. 6. Автовідтворення youtube ролика.
  6. 7. Вимкнути відображення схожих youtube відеороликів.

При встановленні контенту на сайт з відеохостингу youtube.com веб-технолог стикається з низкою типових і нетипових завдань, вирішення яких відображено в даній статті. Звичайно, можна звернутися за пошуком до документації розробників http://developers.google.com/ , Але ми вже узагальнили матеріал, викладений там, виключили зайве, адаптували під потреби комерційного сайту.

1. Вставка відеоролика з youtube на сайт.

Отже, перша і найбільш часто зустрічається завдання - це вставка відеоролика на сайт. Для вирішення цього завдання необхідно знайти необхідне відео на сайті http://youtube.com і вставити код наступного виду на свою сторінку:

<Iframe type = "text / html" width = "640" height = "390" src = "http://www.youtube.com/embed/VIDEO_ID" frameborder = "0" />

Тут VIDEO_ID - ідентифікатор потрібного нам відео, наприклад, 'xw6wYcyI-Aw'.

Цей код також Ви можете отримати автоматично, натиснувши на сторінці з відео на youtube кнопку "Поділитися" і вибравши пункт "html-код". В поле введення Ви можете скопіювати в буфері обміну код і вставити його на свою сторінку.

Після вставки коду ми отримаємо сторінку такого вигляду:

2. Об'єднання youtube роликів в плейлист.

Найчастіше нам потрібно вивести на сторінку не один ролик, а кілька, об'єднаних в плейлист каналу на http://youtube.com .

В такому випадку код потрібно модифікувати таким чином:

<Iframe type = "text / html" width = "640" height = "390" src = "http://www.youtube.com/embed/VIDEO_ID?list=PLAYLIST_ID" frameborder = "0" />

Тобто в атрибут 'src' потрібно додати параметр '? List = PLAYLIST_ID', де PLAYLIST_ID - ідентифікатор плейлиста, наприклад 'PL-QXPTHVI31NwIGf9XtUbUOEAZv9BQQwv'. І тоді вставлене відео матиме такий вигляд:

Варто врахувати той момент, що в якості картинки відео буде вказуватися не мініатюра для відео VIDEO_ID, а картинка, задана як мініатюри для всього плейлиста. У зв'язку з цим виникає наступна задача: вставка декількох відео зі списку відтворення на сторінку.

3. Вставка декількох youtube-відео з одного плейлиста на сторінку.

Якщо вставити кілька відео стандартним способом, то ми отримаємо наступну сторінку:

Рішення:
Сформувати плейлист вручну, в такому випадку у кожного відео буде своя мініатюра. Для цього потрібно сформувати список ідентифікаторів відеороликів плейлиста (розділених між собою комами) і додати його в атрибут src параметром 'playlist'.

приклад:

<? $ Playlist = 'jwTpFlrZkoo, mLoh40B4MJo, jZ7aGMbFJQ4, -0zy4srVqOY, ld-4vksQ6p0, rKZJVOyu9R0, 60kVgv5rbrQ, SHBd04IX7YQ, Zgs3AJQu_0I'; ?> <Iframe width = "480" height = "270" src = "https://www.youtube.com/embed/xw6wYcyI-Aw?playlist=<?= $ playlist?> & Rel = 0" style = "margin -right: 15px; " frameborder = "0" allowfullscreen> </ iframe> <iframe width = "480" height = "270" src = "https://www.youtube.com/embed/jtFkC3Z2-M8?playlist=<?= $ playlist? > & rel = 0 "frameborder =" 0 "allowfullscreen> </ iframe> <iframe width =" 480 "height =" 270 "src =" https://www.youtube.com/embed/HN8GBG0JtUA?playlist=<?= $ playlist?> & rel = 0 "style =" margin-right: 15px; " frameborder = "0" allowfullscreen> </ iframe> <iframe width = "480" height = "270" src = "https://www.youtube.com/embed/pFUdPJeBdAU?playlist=<?= $ playlist?> & rel = 0 "frameborder =" 0 "allowfullscreen> </ iframe>

В такому випадку сторінка прийме потрібний нам вигляд:

4. Заміна картинки на youtube-відео.

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

Стандартна мініатюра виглядає так:

Бачимо, що і кадр не особливо вдалий, і кнопка запуску відтворення знаходиться не там, де нам хотілося б.

Є два рішення:

1) Заміна стандартної картинки користувальницької.
Вибираємо кадр відео, відповідний на роль мініатюри. Потім в фотошопі або іншому графічному редакторі обрізаємо картинку так, щоб область особи була в лівій або правій частині кадру. Заходимо в менеджер відео на http://youtube.com/ і завантажуємо свій значок відео:

І отримуємо таке відображення відео:


2) Підготовка мініатюри з підписом.
Ми бачимо, що приблизно 50% області мініатюри відео не несе смислового навантаження, тому на цьому місці можна розмістити блок або про суть відео, або про власника каналу, або з будь-якої іншої продає інформацією. І тоді мініатюра прийме такий вигляд:


5. Відтворення youtube ролика з певного моменту.

Бувають випадки, коли необхідно почати програвати відео, наприклад, з другої хвилини.
Тоді можна в атрибут src додати параметр start і відтворення почнеться з потрібною нам секунди.

приклад:

<Iframe width = "480" height = "270" src = "https://www.youtube.com/embed/xw6wYcyI-Aw?start=60" style = "margin-right: 15px;" frameborder = "0" allowfullscreen> </ iframe>

У прикладі відтворення почнеться з шестидесятих секунди.

6. Автовідтворення youtube ролика.

Щоб відео початок програватися відразу після завантаження сторінки, потрібно додати параметр autoplay = 1:

<Iframe width = "560" height = "315" src = "https://www.youtube.com/embed/rKZJVOyu9R0?autoplay=1" frameborder = "0"> </ iframe>

7. Вимкнути відображення схожих youtube відеороликів.

Відмовитися від показу інших пропозицій після кінця відтворення ролика можна, прописавши параметр rel = 0:

<Iframe width = "560" height = "315" src = "https://www.youtube.com/embed/rKZJVOyu9R0?rel=0" frameborder = "0"> </ iframe>


Автор: Буякова Катерина - Web-технолог інтернет-агентства Brandmaker.

Com/embed/VIDEO_ID?
Playlist = 'jwTpFlrZkoo, mLoh40B4MJo, jZ7aGMbFJQ4, -0zy4srVqOY, ld-4vksQ6p0, rKZJVOyu9R0, 60kVgv5rbrQ, SHBd04IX7YQ, Zgs3AJQu_0I'; ?
Com/embed/xw6wYcyI-Aw?
Playlist=<?
Playlist?
Com/embed/jtFkC3Z2-M8?
Playlist=<?
Playlist?
Com/embed/HN8GBG0JtUA?
Playlist=<?

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

Или позвоните нам по телефонам: (048) 823-25-64

Организация (обязательно) *

Адрес доставки

Объем

Как с вами связаться:

Имя

Телефон (обязательно) *

Мобильный телефон

Ваш E-Mail

Дополнительная информация: