Об этом способе уже писали другие люди, но есть один чисто эстетический нюанс. При воспроизведении кода тех публикаций
появляются сверху и снизу видео горизонтальные чёрные полосы. Рассмотрим вставку видео со стороннего сервиса в
блок на сайте.
Дело в том, что при вёрстке за основу расчёта симметрии показа экрана видео часто принимаем соотношение 16:9.
Соответственно отступы верхний и нижний кромки видео блока .adaptive-wrap (смотреть ниже)
закладывают как 56.25% и соответственно 30px. Я же советую несколько уменьшить оба отсута до 52.25%
и 25px и таким образом чёрные не приятные полосы уходят за пределы экрана видео.
При формировании кода необходимо прописать в теге video ширину и высоту блока video или просто установить auto.
Ниже представлен HTML код страницы со вставкой видео в адаптированном варианте с сервиса youtube.com.
Лишь какие-то минимальные зачатки полос начинают появляться с 400px расширения экрана монитора.
Как это работает на сайте в живую смотрите >здесь.
Можете скопировать весь код на свою страницу в html формате, сохранить, надеюсь пригодится.
Можно проверить как показывается адаптация на экране монитора настольного компьютера. Или просто открыть
на своём телефоне. Но, на телефоне эмуляция неудобна.
<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Верстаем адаптивное видео на сайте </title>
<style>
section{
border:3px solid red;
max-width:700px;
margin:0 auto;
text-align:center;
}
.adaptive-wrap {
position: relative;
padding-bottom: 52.25%; /*задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */
padding-top: 25px;
height:0;
overflow: hidden;
border:3px solid red;
}
.adaptive-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<section>
<h1>Подстройка блока видео для iframe из Uoutube</h1>
<p>Обратите внимание - на видео отсуствуют верхние и нижние чёрные полосы по горизонту потому,
что заданы padding-bottom:52.25%; padding-top:25px;. </p>
<div class="adaptive-wrap">
<iframe width="auto" src="https://www.youtube.com/embed/27dg9be0_NM" frameborder="0"
allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</section>
</body>
</html>
Это интересно
0
|
|||
Последние откомментированные темы:
-
Где бесплатно брать заказы в интернете? | Фриланс | Поиск удаленной работы
(2)
EVG90
,
16.07.2020
-
Совет дня. Как открыть ссылку в новой вкладке или окне?
(1)
master284
,
02.05.2020
-
Ремаркетинг
(1)
atikih
,
28.06.2019
-
Проверка позиций сайта в поисковиках. Топ инспектор
(1)
master284
,
13.01.2019
20240427060845