Адаптивное видео шириной 100%

Адаптивное видео шириной 100%

Для того чтобы видео, которое вставляется фреймом, например с YouTube, подстраивалось под размер родителя (имело ширину 100%) используем следующее:

HTML:

<div class="video">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/gIO9a2HXrl0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>	
</div>

1

2

3

<div class="video">

<iframe width="560" height="315" src="https://www.youtube.com/embed/gIO9a2HXrl0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</div>

Пусть вас не смущает ширина и высота фрейма, которую выдает YouTube при экспорте, их заменит наш стиль

CSS для формата 16:9:

.video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

.video {

position: relative;

padding-bottom: 56.25%;

padding-top: 25px;

height: 0;

}

.video iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

CSS для формата 4:3:

.video {
    position: relative;
    padding-bottom: 75%;
    padding-top: 25px;
    height: 0;
}
.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

.video {

position: relative;

padding-bottom: 75%;

padding-top: 25px;

height: 0;

}

.video iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

Пример:

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.

Протестировать на смартфоне Открыть QR-код для перехода на эту страницу с телефона

Помощь по установке кода Ответы на часто задаваемые вопросы и решение типовых ошибок и проблем

Страница находится в стадии разработки

Поддержать блог Любые Ваши (пусть даже и скромные) суммы значительно повышают мотивацию развивать блог, делиться наработками и придумывать новые.

Опубликовано: 24.04.2018 / Обновлено: 05.06.2019
Рубрики: Фото, аудио и видео - простые решения
Метки: CSS, Видео
14829 просмотров

Смотрите также:

Блок из 4-х фотографий

Оформление блок-секции из четырех фотографий на CSS

Прокрутка фонового изображения вверх

Прокрутка высокого фонового изображения вверх при наведении на него мышки

Полупрозрачный бордюр на CSS

Создание полупрозрачных бордюров с использованием псевдоклассов :before и :after

Добавить комментарий:

Ваш комментарий отправлен!