Фонове відео робить сайт живим. Але коли воно важить 40 МБ і вантажиться чотири секунди, відвідувач іде раніше, ніж бачить ваш контент.

За даними HTTP Archive за 2025 рік, відео займає до 20% загальної ваги медійних сторінок. Google враховує швидкість завантаження в ранжуванні, а Core Web Vitals штрафують за повільний LCP. Важке фонове відео б'є і по користувачу, і по SEO.

Нижче, покроковий алгоритм: як стиснути фонове відео до 5 МБ без втрати видимої якості. Безплатними інструментами, без реєстрацій і водяних знаків.

💡 Швидкий огляд:

• Формати: готуємо MP4 (H.264) + WebM (VP9), два файли покривають усі сучасні браузери
• Інструмент: HandBrake, безплатний, з відкритим кодом, із точним налаштуванням бітрейту та роздільної здатності
• Для Mac: вбудований експорт QuickTime, без встановлення стороннього софту
• Трюк із YouTube: завантажили, YouTube перетиснув, завантажили назад оптимізований MP4
• Онлайн-сервіси: CloudConvert, VideoSmaller, Clipchamp, коли встановлювати софт не хочеться
• WordPress: плагіни mb.YTPlayer і Video Background, фонове відео без правлення теми

Формати: чому потрібні два файли

Фонове відео має відтворюватися без ривків у всіх браузерах. Одним форматом тут не обійтися.

MP4 (H.264), основний. Працює в Safari, Chrome, Edge, Opera та на всіх мобільних пристроях. Це база, яку розуміє кожен браузер без винятків.

WebM (VP9), додатковий. Файл помітно менший за тієї самої якості. Chrome і Firefox беруть WebM у першу чергу, економлять трафік користувачу. За даними Google Developers, VP9 дає до 50% економії бітрейту проти H.264 за однакової картинки.

Для мобільних, статичний JPG-постер. Якщо браузер відмовився від автовідтворення (економія трафіку, повільна мережа), користувач побачить картинку, а не порожнє місце.

Роздільна здатність вище 720p для фону рідко виправдана. Ширини 1280 пікселів вистачає на весь екран ноутбука, а файл важить у рази менше за Full HD. Перевірте на своєму макеті, найімовірніше, 720p закриє потребу із запасом.

Крок 1: HandBrake, основний інструмент

HandBrake, безплатний відеоконвертер із відкритим кодом під Windows, Mac і Linux. Дає повний контроль над кодеком, бітрейтом і роздільною здатністю. Без водяних знаків, без реєстрації, без обмежень за розміром файлу.

Алгоритм стиснення фонового відео:

• Завантажте HandBrake з офіційного сайту і відкрийте вихідний відеофайл.
• На вкладці Summary виберіть формат MP4 і поставте галочку Web Optimized. Це перемістить метадані на початок файлу, відео почне грати одразу, не чекаючи повного завантаження.
• На вкладці Dimensions установіть ширину 1280. Висота підлаштується автоматично. Фільтр Anamorphic залиште в значенні Automatic.
• На вкладці Video виберіть кодек H.264 (x264). Повзунок Constant Quality, у діапазоні 22-26 RF. Що вище число, то менший файл. Оптимально: 24 RF.
• Видаліть аудіодоріжку. Фонове відео за замовчуванням іде без звуку, на вкладці Audio зніміть галочку.
• Натисніть **Start **Encode. Файл на 30-50 МБ стискається до 3-8 МБ. Якість залишається прийнятною для фону.

Для WebM-версії повторіть ті самі кроки, але на кроці 2 виберіть формат WebM, а на кроці 4, кодек VP9.

На практиці однократний прогін через HandBrake зменшує фонове відео в 5-10 разів. Відвідувач не помічає різниці, а сторінка вантажиться на 2-3 секунди швидше. Це перше, що ми робимо з будь-яким відео перед завантаженням на сайт.

Крок 2: Стиснення на Mac штатними засобами

Якщо ви на macOS, встановлювати нічого не потрібно. Вбудований експорт QuickTime закриває базове стиснення.

• Відкрийте відеофайл у QuickTime Player.
• Виберіть Файл → Експорт → 720p.
• Укажіть ім'я та папку. Файл збережеться в MP4 із кодеком H.264.

Метод не дає тонкого налаштування бітрейту, але для швидкого результату його достатньо. Вихідник 60 МБ перетворюється на 8-12 МБ без додаткових рухів.

Більш просунутий штатний варіант, iMovie. Імпортуйте відео, виберіть Файл → Поділитися → Файл, укажіть роздільну здатність 720p і якість «Середня». iMovie дає трохи кращий контроль над підсумковим розміром, ніж QuickTime. Для тонкої роботи все ж краще HandBrake, але коли потрібно «тут і зараз», Mac-інструментів вистачає.

Крок 3: Стиснення через YouTube, швидкий трюк

Найлінивіший спосіб отримати оптимізоване відео, прогнати його через YouTube.

• Завантажте відео на YouTube. Можна в режимі «Доступ за посиланням», ролик не потрапить у публічний пошук.
• Дочекайтеся закінчення обробки. YouTube автоматично перекодовує відео в усі сучасні формати та роздільні здатності.
• Завантажте оптимізований MP4 назад через конвертер, наприклад, CloudConvert.

Результат: алгоритми стиснення YouTube, одні з найкращих в індустрії. Файл виходить невеликим і візуально чистим. Метод виручає, коли HandBrake під рукою немає, а стиснути потрібно прямо зараз.

Альтернативний підхід, узагалі не вантажити відеофайл на свій хостинг. Вставте YouTube-ролик як фон через плагін mb.YTPlayer (розділ нижче). Це економить місце на сервері та трафік, хоча дає менше контролю над відтворенням.

Онлайн-інструменти: коли встановлювати софт не хочеться

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

CloudConvert, універсальний комбайн. Підтримує понад 200 форматів, конвертує MP4 у WebM однією кнопкою. Безплатного ліміту вистачає на разову оптимізацію. Мінус, швидкість залежить від черги на сервері.

VideoSmaller, мінімалістичний сервіс для одного завдання: стиснути MP4. Інтерфейс із двох кнопок: завантажити та скачати. Не потребує реєстрації. Не працює з WebM і MOV, тільки MP4.

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

Зверніть увагу: онлайн-сервіси завантажують відео на сторонні сервери. Для приватних або конфіденційних матеріалів використовуйте HandBrake локально.

Плагіни WordPress для фонового відео

Якщо сайт на WordPress, вбудовувати фонове відео простіше через плагіни. Редагувати тему або писати CSS не доведеться.

mb.YTPlayer, вбудовує YouTube-відео як фон сторінки або секції. Плюс у тому, що саме відео зберігається на серверах YouTube і не вантажить ваш хостинг. Плагін додає шорткод, вставляєте в потрібне місце, і відео грає фоном. На мобільних пристроях відео запускається за першим дотиком до екрана. У плагіна 1 000+ активних установок і рейтинг 4,1 на WordPress.org.

🔗 mb.YTPlayer на WordPress.org

Video Background, рішення для власних відеофайлів. Указуєте контейнер, посилання на MP4 і посилання на WebM. Плагін сам визначає браузер і підставляє потрібний формат. Сумісний із WPBakery і SiteOrigin. Мінімум налаштувань.

🔗 Video Background на WordPress.org

Easy Video Background WP на CodeCanyon, платний варіант із розширеними можливостями: таймер автовідтворення, настроюваний оверлей, контроль гучності. Оплата одноразова.

Якщо відео вже на YouTube, беріть mb.YTPlayer. Якщо у вас свої MP4 і WebM на хостингу,, Video Background. Потрібні тонкі налаштування відображення, Easy Video Background WP.

Наочна демонстрація процесу стиснення, від вибору формату до фінального експорту:

⁉️🤔 Часті запитання

Фонове відео обов'язково має бути без звуку?

Так. Автовідтворення зі звуком дратує і заборонене політиками більшості браузерів. Chrome і Safari блокують автовідтворення відео зі звуком із 2018 року. Видаліть аудіодоріжку при експорті, і файл стане помітно легшим.

Скільки має важити фонове відео?

Хороший орієнтир, до 5 МБ для 10-15 секунд фону в 720p. Усе, що важче 8 МБ, уже помітно гальмує завантаження на мобільній мережі. HandBrake з налаштуванням RF 24 на 720p зазвичай вкладається в цей діапазон.

MP4 чи WebM, що краще для фону?

Обидва. MP4, для Safari та iOS (вони не розуміють WebM). WebM, для Chrome і Firefox (файл менший за тієї самої якості). Правильна верстка з тегом video сама вибере підхожий формат. Готуйте обидва файли завжди.

Чи можна використовувати YouTube-відео як фон напряму?

Технічно так, через YouTube IFrame API або плагін mb.YTPlayer. Але є мінуси: елементи керування YouTube видно при наведенні, реклама може перебити фон, попереднє завантаження йде повільніше, ніж у власних файлів. Для фону без компромісів краще вантажити свої MP4 і WebM.

Що показувати на мобільних, якщо відео не завантажується?

Статичний JPG-постер, перший кадр відео або спеціально підготовлене зображення. Прописується атрибутом poster у тегу video. Більшість WordPress-плагінів додають постер автоматично з першого кадру.

Чи варто морочитися з оптимізацією?

Різниця між сирим 40-мегабайтним MOV і стиснутим 4-мегабайтним MP4 — це 2-3 секунди завантаження сторінки. Для відвідувача на мобільній мережі ці секунди вирішують, залишиться він чи піде.

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

Якщо ви на WordPress, поставте mb.YTPlayer або Video Background і забудьте про ручну верстку. Якщо файли свої, завжди готуйте MP4 + WebM і тримайте підсумковий розмір нижче 5 МБ. Це база, яка працює на будь-якому сайті, від лендингу до інтернет-магазину.