Як вставити відео c Youtube на сайт (HTML, CMS, адаптивність)

  1. Вставка відео з Youtube
  2. Вставка відео в WordPress і не тільки
  3. Адаптивне відео c Youtube

У недавній замітці про те як правильно   написати статтю для блогу   я згадував, що бажано додавати в контент графічні матеріали та відеоролики У недавній замітці про те як правильно написати статтю для блогу я згадував, що бажано додавати в контент графічні матеріали та відеоролики. Вони покращують читаність тексту + доповнюють його легкої по сприйняттю інформацією. У навчальних публікаціях це, наприклад, може бути візуальна демонстрація того чи іншого питання, описаного в статті. Часто подібні матеріали зустрічаються в розважальних веб-проектах. Та й взагалі відеоконтент в наш час стає дуже популярним.

Саме тому сьогодні я хочу розглянути кілька нюансів по вставці відео на сайт з Youtube і схожих сервісів. Частина інформації на початку знадобиться новачкам, а в кінці тексту знайдете один прийом для верстки . Розділи статті:

Вставка відео з Youtube

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

На цій сторінці ви можете:

  1. Визначитися з методом поширення ролика: соціальні мережі, вставити відео на сайт в HTML форматі (що нам і потрібно) або відправити його поштою.
  2. При кліці на другий пункт побачите спеціальний HTML код для вставки відео на сайті.
  3. На третьому кроці вибираєте розмір - є парочка форматів за замовчуванням (640х360, 560х315 і т.п.), але також дозволяється ставити і свої значення.
  4. За бажанням включаєте доп.параметри: показ назви, панелі управління і інших пропозицій.

Тобто все, що вам потрібно зробити, це скопіювати код відповідного ролика і додати його в потрібне місце.

<Iframe width = "640" height = "360" src = "https://www.youtube.com/embed/KiS8rZBeIO0" frameborder = "0" allowfullscreen> </ iframe>

<Iframe width = "640" height = "360" src = "https://www.youtube.com/embed/KiS8rZBeIO0" frameborder = "0" allowfullscreen> </ iframe>

Якщо у вас в проекті є певна админка, то використовуйте її вбудований текстовий редактор. В іншому випадку доведеться редагувати безпосередньо HTML сторінку (через Notepad ++ або Sublime Text тощо). Реалізацію першого варіанту можете подивитися нижче на прикладі з Вордпресс .

Пару слів про тезі Iframe, який застосовується щоб вставити відео на сайт в HTML з Ютуб. Тут є такі параметри:

  • width - ширина блоку;
  • height - висота;
  • src - посилання на Youtube відео;
  • frameborder - відображення рамки / кордону у фрейму;
  • allowfullscreen - підтримка повноекранного режиму.

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

Вставка відео в WordPress і не тільки

Тепер розглянемо найпростіший спосіб як вставити відео з Youtube на сайт WordPress. Дану систему використовує більшість блогів і не тільки. Спочатку пару слів про реалізацію через текстовий редактор, про що я говорив вище, а потім покажу варіант з HTML.

Пам'ятається, раніше для вирішення завдання навіть були якісь спеціальні wp плагіни , Але зараз все набагато простіше, я б сказав елементарно.

Щоб вставити відео на сайт WordPress:

  1. Заходьте в адмінку свого веб-проекту і вибирайте додавання / редагування запису.
  2. Потім в текстовому редакторі просто розміщуєте посилання на Youtube відео.
  3. У 99% випадків система автоматично перетворює лінк (як показано на ДІФКУ нижче).

У 99% випадків система автоматично перетворює лінк (як показано на ДІФКУ нижче)

Цікаво, що в останніх версіях CMS даний прийом працює в обох режимах редактора. У «візуальний» ви можете відразу побачити перетворення, а в HTML підміна линка на відео буде видно при збереженні і перегляді опублікованого запису.

Можливо, в інших системах такої функції немає, і доведеться використовувати варіант з HTML. У такому випадку для вставки відео з Youtube на сайт Joomla будь то або Вордпресс , Або будь-яка інша CMS вам потрібно:

  1. Зайти в текстовий редактор в режим HTML.
  2. Скопіювати код з ютуба в область контенту.
  3. Зберегти сторінку / запис в тому ж HTML режимі.

Зберегти сторінку / запис в тому ж HTML режимі

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

Адаптивне відео c Youtube

Коли на сторінку ви додаєте код плеєра з конкретними розмірами ширини і висоти, то при перегляді сайту на менших дозволах екрану це може викликати деякі проблеми. Якщо у вас хороший адаптивний шаблон , То швидше за все, там все це вже враховано, в іншому випадку доведеться впровадити один хак.

Щоб реалізувати адаптивне відео на сайті вставляєте HTML код з Ютуб, Vimeo і будь-якого іншого сервісу всередину нового DIV:

<Div class = "adaptive-wrap"> <iframe width = "640" height = "360" src = "https://www.youtube.com/embed/KiS8rZBeIO0" frameborder = "0" allowfullscreen> </ iframe> </ div>

<Div class = "adaptive-wrap"> <iframe width = "640" height = "360" src = "https://www.youtube.com/embed/KiS8rZBeIO0" frameborder = "0" allowfullscreen> </ iframe> </ div>

Потім в стилях прописуєте:

.adaptive-wrap {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .Adaptive-wrap iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.adaptive-wrap {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .Adaptive-wrap iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Тут є 2 аспекти:

  • Якщо плеєр додається через object і embed, то для них також задаєте аналогічні стилі як з iframe.
  • У першому селекторі стилів параметр padding-bottom: 56.25%; відповідає пропорціям ролика 16: 9, якщо потрібен формат 4: 3 - використовуйте значення 75%.

Код перевіряв, все працює. Даних трьох прикладів як вставити відео з Youtube на сайт вам повинно вистачити з головою. Будуть якісь питання - пишіть в коментарях. Можливо, пізніше доповню пост, якщо знайду нову інфу.