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

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

Поїхали!

Частина І: Що таке відео-емблейд?

Перш за все, важливо розуміти, що стоїть за основним елементом вбудовування відео - кодом вбудовування. Код вбудовування - це фрагмент HTML-коду, який можна використовувати для додавання відео та інших видів контенту на ваш сайт.

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

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

<iframe src="URL'></iframe> </iframe

Замість URL-адреси просто додайте посилання на відео, і вуаля - ось ваш HTML-код. Знання HTML також дозволить вам налаштувати код вбудовування вручну: додати необхідну висоту і ширину, або заблокувати певні функції відео, які ви не хочете відображати на своїй сторінці. Це може виглядати так:

У вас може виникнути питання - чому б просто не завантажити відео на сайт і не покінчити з цим клопотом? Google часто говорить про те, що відео додає значний час завантаження сайту, знижує швидкість роботи сайту, і, таким чином, впливає на користувацький досвід і негативно впливає на SEO. Як наслідок, ви можете втратити трафік, рейтинги тощо. Не кажучи вже про перевантажені сервери, додаткові витрати тощо.

Вбудовування відео на сайт допоможе вам подолати більшість з цих проблем. Ось чому.

Частина ІІ: Вставити і не завантажувати: Ключові переваги вбудованого відео

1. Вбудовуйте відео на веб-сайт для збільшення часу завантаження відео (і SEO)

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

Чому ви повинні про це турбуватися? Ось графік, який показує, як час завантаження сайту впливає на конверсію:

Джерело: Crisp Video

Отже, зниження часу завантаження означає зниження рейтингу, зменшення трафіку, зменшення кількості конверсій і... втрату прибутку!

Але не варто думати, що додавання відео принесе Вам тільки неприємності. Наявність відео на сайті суттєво вплине на кількість часу, який люди проводять на вашому сайті (позитивний фактор ранжування), а також саме відео може потрапити на сторінку №1 в Google, що приносить трафік, і все інше, що випливає з цього. Таким чином, все це лише питання правильного підходу та вибору варіанту вбудовування, а не завантаження.

2. Вбудовування відео на сайт для подолання обмежень пропускної здатності

Завантаження відео вичерпує пропускну здатність вашого власного сервера (яка має свою ціну). І кожного разу, коли хтось посилається на ваше відео або вбудовує його на свій сайт, страждає ваш власний сайт, оскільки вони знову використовують вашу пропускну здатність. Це дорого і неефективно.

3. Вбудовуйте відео на сайт, щоб уникнути обмежень на розмір файлу та його зберігання

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

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

Джерело: ProPhoto

4. Вбудовування відео на сайт для підвищення якості відео

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

Частина ІІІ: Вибір відеохостингу

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

Не існуєконцепції найкращого чи найгіршого відеохостингу, це питання балансу потрібних функцій та вартості. Отже, ми підсумували ключові особливості, які слід враховувати при виборі відповідного відеохостингу:

Чуйний гравець

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

Швидкість та якість обслуговування

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

• Підтримка відмінної якості відео: У 2020 році ви не можете дозволити собі зернисті кадри та анімацію з роздільною здатністю 360p або 480p. Тому, якщо у вас не дуже великий бюджет і 1080p не підходить для ваших цілей, переконайтеся, що обраний вами відеохостинг підтримує Ultra HD або вище. Найкращі платформи пропонують автоматичне перемикання між якістю HD/SD.
• Відмінна підтримка та обслуговування клієнтів: Перевірте якість серверів, які використовує сервіс. Чи не падає сайт час від часу (це вплине на відображення відео на вашому сайті!)? Чи не схильний він взагалі до DDoS-атак? І, що найголовніше, який середній час відповіді на запити їхніх клієнтів?

Параметри конфігурації плеєра

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

Можливості налаштування відеоплеєра на хостингуWave.video

Особливості лідогенерації

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

Конфіденційність

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

SEO

Якщо ви хочете пограти з рейтингом власного сайту, до вибору платформи для розміщення відео варто підходити стратегічно. Шукайте хостинг, який є одночасно стабільним і популярним (тобто сам по собі займає високі позиції в рейтингу), і використовуйтейого частку в рейтингу Google .Перш за все, розміщення вашого відео на зовнішньому сайті забезпечить вас вихідними посиланнями, або зворотними посиланнями, і потенційно полегшить отримання багатих на відео фрагментів для вашого власного домену. Таким чином, це дасть вам можливість вплинути на рейтинг вашого сайту.

Джерело: Moz

Аналітика та збір даних

Ваші відео призначені для залучення та задоволення клієнтів, тому ви, природно, хотіли б знати, наскільки вони задоволені. Тому сервіс, на якому ви розміщуєте своє відео, повинен надавати вам безліч аналітичних даних. І не тільки прості речі на кшталт переглядів, коментарів, а й зовсім інший вид складних даних. Вбудовування відео дозволяє додати спеціальний код відстеження - з Google Tag Manager - і отримати додаткову аналітику в рамках вашого облікового запису Google Analytics, наприклад, середній час перегляду, момент, коли люди взагалі припиняють дивитися, і так далі. Всі ці дані вам потрібні, щоб знати, як і чому ваші відео мають успіх (або не мають).

Вартість

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

Частина IV: Як згенерувати код вбудовування

Після того, як ви вибрали платформу відеохостингу та завантажили весь свій відеоконтент, залишився лише один крок, який відділяє вас від додавання/вбудовування відео на ваш веб-сайт - пошук коду вбудовування.

Вбудовування відео з відеохостингів

Вбудовування від Wave.video

Щоб вставити відео з Wave.video, перейдіть в роз діл "Мої проекти "і знайдіть відео, яке ви хочете вставити. Потім наведіть курсор на іконку з трьома крапками і натисніть "Програвач".

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

Щоб налаштувати відеоплеєр, відкрийте вкладку "Зовнішній вигляд" і сміливо змінюйте колір плеєра, визначайте, які елементи управління будуть відображатися (якщо такі є), або вибирайте власну мініатюру. Якщо ви хочете дізнатися більше про можливості відеохостингу Wave.video, обов' язково прочитайте цю статтю.

Існує кілька варіантів того, як ви можете вбудувати відео за допомогою Wave.video на свій сайт або блог.

• Вбудоване вбудовування

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

• Popover embed

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

Існує три способи інтеграції відео у контент сторінки: мініатюра, виділення та текстове посилання.

Вбудовування з YouTube

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

Якщо ви хочете додатково налаштувати, є багато параметрів - автозапуск, колір, мова, циклічність та інші - які ви можете додати в iframe embed. Всі вони перераховані на сторінці Google для розробників.

Вбудовування з Vimeo

Код для вбудовування Vimeo можна знайти, натиснувши на іконку "Поділитися" праворуч від відео. Ви побачите вікно з різними рамками, одна з яких - код для вбудовування.

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

Перейшовши на Pro, Business або Premium, ви можете побачити деякі додаткові переваги, такі як налаштування кольорів та компонентів, додавання кінцевих екранів та логотипу.

Вбудовування від Wistia

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

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

Вбудовування від Vidyard

Зверніть увагу, що для вбудовування відео з Vidyard у вашому плані повинна бути встановлена функція Player Embeds. Vidyard підтримує два варіанти вбудовування - адаптивне вбудовування та вбудовування у фрейм.

На інформаційній панелі Vidyard натисніть на розділ "Вміст" > "Плеєр", наведіть курсор на плеєр, а потім натисніть "Поділитися". У розділі "Адаптивне вбудовування" просто натисніть на піктограму "Копіювати код " і виберіть опцію "Використовувати лайтбокс", щоб перетворити код на вбудовування у вигляді лайтбоксу. Ви можете вручну ввести розміри плеєра, щоб отримати максимальну ширину і висоту.

Якщо ваш веб-сайт не підтримує JavaScript, ви можете встановити прапорець "Проблеми з вбудовуванням?" та скопіювати код вбудовування iframe.

Вбудовування відео зсоціальних мереж

Вбудовування з Facebook

Кожне відео на Facebook підтримує функцію вбудовування. Для цього достатньо натиснути на "..." у правому верхньому куті публікації у Facebook та натиснути кнопку "Вставити".

За бажанням, ви можете обрати опцію "Включити повний пост" (просто натисніть на прапорець), і разом з відео буде додано відповідний текст з посту у Фейсбуці.

Вбудовування з Instagram

Оскільки Instagram належить Facebook, процес вбудовування дуже схожий. Відкрийте Instagram на робочому столі (не в додатку) і натисніть на кнопку "..." у верхньому правому куті.

Натисніть на кнопку "Вставити" та скопіюйте код вставки. Знову ж таки, у вас буде вибір додати (або не додавати) підпис до вашого вбудовування.

Вбудовування з Twitter

Щоб вставити відео з Twitter, не використовуйте додаток. Відкрийте твіт на робочому столі та виберіть "Вставити твіт" у випадаючому меню, розташованому поруч з кнопкою "Підписатися" на твіті. Потім виберіть опцію "Вставити твіт".

Просто скопіюйте/вставте код вбудовування - але зверніть увагу, що при вбудовуванні Twitter відображатиме весь твіт з підписом, немає можливості відобразити окреме відео.

Вбудовування з TikTok

У TikTok кнопка "Отримати коддля вбудовування" з'являється прямо на відео. Хоча тут немає варіантів для вибору, оскільки все, що ви отримаєте, - це посилання на плеєр з роздільною здатністю 340×700 та автоматичним відтворенням, ви можете налаштувати деякі параметри під час додавання коду вбудовування на вашу веб-сторінку.

Альтернативний метод: Генератори коду для вбудовування відео

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

Існує альтернативний спосіб - ви можете знайти безліч спеціальних сайтів, які за своєю суттю є генераторами коду для вбудовування відео. Такі платформи, як Embed.ly, Toolki та Siege Media ,дозволяють згенерувати код вбудовування для вашого відео: все, що вам потрібно зробити - це мати під рукою URL-адресу відео, і ці сайти автоматично створять код вбудовування для вашого відео.

Але цей обхідний шлях має кілька підводних каменів:

• Зазвичай, щойно вбудоване відео на вашому сайті буде містити водяний знак платформи
• Можливості налаштування відео дуже обмежені
• Ці платформи не пропонують жодної аналітики або навіть можливості додати код відстеження для подальшого відстеження статистики вашого відео в Google Analytics або сторонніх аналітичних платформах.

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

Частина V: Як вставити відео на сайт

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

Вбудовування відео в HTML

КРОК 1: ВІДРЕДАГУЙТЕ ВАШ HTML

Відкрийте сторінку, на яку ви хочете вставити відео, в режимі редагування. Виберіть точне місце в коді, де має з'явитися відео, і встановіть туди курсор.

КРОК 2: СКОПІЮВАТИ ТА ВСТАВИТИ КОД ВБУДОВУВАННЯ

Скопіюйте код вбудовування і просто вставте його в те місце, на яке ви навели курсор. Натисніть "Зберегти" або "Опублікувати", і все.

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

Вбудовування відео в WordPress

Якщо ваш сайт працює на WordPress, є два варіанти вбудовування відео.

#1 ВАРІАНТ: СКОПІЮВАТИ/ВСТАВИТИ URL-АДРЕСУ

Для найпопулярніших відеохостингів, таких як Vimeo, YouTube та деяких інших, не потрібно шукати повний код вбудовування. Достатньо скопіювати URL-адресу відео та вставити її у візуальний редактор - код вбудовування буде створено автоматично.

#2 ВАРІАНТ: ВИКОРИСТОВУВАТИ КОД ВБУДОВУВАННЯ

Іноді ви хочете додати деякі налаштування до відображення відео, або ви можете розміщувати свої відео на платформі, яка не підтримується автоматичним вбудовуванням WordPress. Тоді вам доведеться використовувати код вбудовування відео.

Перейдіть до текстового редактора WordPress(не плутайте з візуальним редактором), і ви побачите HTML-версію вашої сторінки. Потім просто виконайте кроки, про які ми згадували вище в розділі "HTML" цього посібника про те, як вбудувати відео на ваш веб-сайт.

Вбудовування відео в Shopify

КРОК 1: СКОПІЮЙТЕ КОД ВБУДОВУВАННЯ

Перший крок дуже простий - просто скопіюйте код вбудовування з місця, де ви розміщуєте своє відео.

КРОК 2: УВІЙДІТЬ ДО ПАНЕЛІ АДМІНІСТРАТОРА SHOPIFY

Увійдіть на свою адміністративну панель адміністратора Shopify. Всі ваші поточні сторінки повинні бути перераховані в розділі Інтернет-магазин -> Сторінки. Перейдіть на сторінку, яку ви хочете редагувати, і зверніть увагу на символи на панелі інструментів редактора.

Крок 3: Натисніть кнопку "Вставити відео"

Виберіть текстовий редактор і на панелі інструментів натисніть на значок відеокамери. З'явиться нове вікно - просто вставте код вставки відео та оберіть опцію "Вставити відео". Все готово!

Вбудовування відео в Squarespace

Що стосується вбудовування, Squarespace дуже схожий на WordPress. Ви можете вибрати між варіантом використання коду вбудовування або вбудовуванням відео шляхом копіювання/вставки URL-адреси відео (можливо лише при вбудовуванні з YouTube, Vimeo, Animoto або Wistia).

Оскільки Squarespace - це конструктор веб-сайтів, просто додайте будь-який блок, який підтримує відео, і просто скопіюйте/вставте URL-адресу відео, або натисніть іконку вбудовування (виділену червоним колом), після чого ви побачите спливаюче вікно, де ви можете скопіювати/вставити код вбудовування.

У Squarespace ви можете налаштувати назву та опис відео, а також, знявши прапорець з опції "Використовувати мініатюру", ви також можете додати власну мініатюру для вашого відео на цій сторінці.

Вбудовування відео в Wix

Wix працює за тими ж принципами, що і попередні платформи хостингу сайтів. Тільки опція копіювання/вставки URL-адреси для вбудовування відео підтримує відео, розміщені на YouTube, Vimeo, DailyMotion та Facebook.

#1 ВАРІАНТ: СКОПІЮВАТИ/ВСТАВИТИ URL-АДРЕСУ

Крок 1: Відкрийте редактор

Натисніть на іконку "+" у лівій частині редактора і виберіть "Відео". У розділі Окремий відеоплеєр виберіть платформу, на якій розміщено ваше відео - YouTube, Vimeo, DailyMotion або Facebook.

Крок 2: Скопіюйте URL-адресу вашого відео

Натисніть "Змінити відео" та скопіюйте URL-адресу відео, яке ви хочете продемонструвати. На цьому кроці ви можете налаштувати параметри відтворення та управління.

Крок 3: Налаштуйте положення вашого відео

Використовуйте перетягування, щоб змінити положення та розмір вашого відео. І просто збережіть сторінку!

#2 ВАРІАНТ: ВИКОРИСТОВУВАТИ КОД ВБУДОВУВАННЯ

Якщо ви не розміщуєте свої відео на платформах, які підтримуються Wix, вам потрібно буде скопіювати код вбудовування вашого відео. А потім, замість того, щоб вибрати "Додати відео", вам потрібно буде натиснути на "Більше". Тут ви знайдете HTML-іфрейм, куди ви можете вставити код вбудовування. Натисніть "Зберегти", і все готово.

Заключне слово

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

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