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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

приклад:

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

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

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

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

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

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

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

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

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

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

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

приклад:

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

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

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

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

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

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