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

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

Давайте почнемо!

Що таке вбудовування відео?

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

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

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

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

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

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

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

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

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, наприклад, середній час перегляду, момент, коли люди припиняють дивитися, тощо. Всі ці дані потрібні вам, щоб знати, як і чому ваші відео є успішними (або ні).

Вартість

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

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

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

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

Вбудовування з 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 підтримує два варіанти вбудовування - адаптивне вбудовування та вбудовування в iframe.

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

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

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

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

Кожне відео на 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, аналітики та доходів. Люди люблять відео і цінують час, який ви витрачаєте на створення цінного, розважального та легкого для сприйняття контенту. Все, що вам потрібно зробити, це переконатися, що ваші відео не впливають на користувацький досвід, і вбудовування відео - чудовий інструмент для цього.

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