Адаптивне відео для сайту за допомогою CSS

110

Адаптивное видео для сайта с помощью CSS

Як часто при використанні вбудованого відео з різних джерел у себе на сайті або блозі, вам доводилося підганяти розмір того чи іншого відеоролика, попередньо змінюючи задані значення ширини та висоти плеєра? Думаю, що більшість блогерів саме так і роблять, раз за разом, в ручну прописують необхідні параметри, для того щоб вбудоване вигляді не виходило за межі блоку, в якому воно розташоване.
А адже існує досить просте і витончене рішення, істотно полегшує цей процес. Наведу простий приклад і в доважок нього готовий набір правил CSS, для реалізації абсолютної чутливості вбудованого відео через iframe, object і embed з популярних відео-сервісів, таких як YouTube, Vimeo та інших.

Для того щоб відео автоматом подстраивалось під розміри батьківського блоку, достатньо в таблиці стилів CSS, завчасно створити окремий клас і визначити всі необхідні властивості для створення «гумового» контейнера, в якому і буде в подальшому розташовуватися вбудований відеоролик. А так як відео-сервіси пропонують різні методи вставки відео на сайт, iframe, object і embed, слід врахувати цю особливість, і задати стилі для всіх цих варіантів відразу. Тим самим у подальшому, ми позбавимо себе від зайвих і непотрібних рухів.

CSS

.video-responsive {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow:hidden;
}
.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.video-responsive {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow:hidden;
}
.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

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

Зі стилями розібралися, залишається створити div контейнер з визначеним класом, в нашому випадку це class=”video-responsive”, потім вставити всередину цього контейнера код потрібного вам відеоролика, і всю цю конструкцію прописати там де ви плануєте демонструвати свої та чужі відео-шедеври)).

<div class="video-responsive">
<iframe width="auto" height="auto" src="посилання на відео" frameborder="0" allowfullscreen></iframe>
</div>

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

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

Дивитися Демо

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

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

Для відео ВКонтакте iframe параметри ширини і висоти обов’язкові і якщо вони не задані, то вбудовуються мінімальні значення автоматично при завантаженні сторінки з фреймами. Так що додавайте параметри width=”auto” height=”auto” у фрейм

З Повагою, Андрій .

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