Сегодня тренд видео фона блоков сайтов оказался востребованным среди веб-мастеров.
Взглянув в первые секунды на сайт, посетитель невольно задерживает сайт на движении
дизайна и уже понимает о чём здесь идёт речь. И так 5 секунд оценки внешего вида
удачно подобранного видео блоков или страницы идёт в счёт поведенческого фактора.
Удачно подобранный, это может быть, например, шапка сайта в исполнении до 300-500 рх
высотой и шириной до 940-1650 рх, как самое первое впечатление.
Однако тут возникает вопрос, а как вставить видео на ширину 1950 px и соблюсти высоту 300 px.
Ведь видео формат предполагает пропорции стандарта 16:9 или 4:3. И здесь приходится
воспользоваться селектором overflow со значением hidden в применении к родительскому
блоку div. Обратите внимание на код страницы со стилями ниже.
В этом случае происходит скрытие от видимости всего, что выходит за пределы блока div.
Таким образом, установив ширину блока video 100% = 1650px мы получаем видео на всю ширину.
При этом высоту блока video оставляем по умолчанию. Это значит, что она меняется автоматически
с изменением ширины при уменьшении экрана.
Но, показывается видео только на высоту блока шапки сайта. То есть, меняя высоту блока
шапки мы можем регулировать высоту показа видео. Попробуйте скопировать код ниже,
сохраните в формате HTML, и откройте в браузере. Будет обрезанное видео.
Измените высоту блока div и увидите другую картинку. Вот так можно заполнять блоки любой
ширины и высоты без искажений и чёрных полос в видео.
Параметр z-index;-1; даёт возможность использовать видео в виде лже видеофона.
Над видео можно располагать текст, картинки как обычно на странице.
Задавать высоту блока video не стоит, потеряете адаптированность. А так она остаётся как
резиновая до определённого размера. А именно 300 на 150 px. C другой стороны,
остерегаться чрезмерного увеличения высоты родительского блока, это помеха адаптированности.
Весь код ниже действующий, можно сохранить и при случае воспользоваться новичкам при освоении
HTML и CSS.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Вставка видео в "шапку" сайта</title>
<style>
div {
border: 3px solid red;
max-width:1650px;
height: 300px;
margin: 0 auto;
position: relative;
overflow:hidden; //видео за пределами блока не видимо
}
video {
position: absolute;//позиция блока video внутри блока div с нулевыми координатами
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1; // позиция на один уровень ниже потока страницы html
}
</style>
</head>
<body>
<div>
<video width="100%" loop="l" autoplay="1" preload="auto">
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
<h1>Здесь всегда можно написать текст, вставить ссылку в любом месте.</h1>
<br><br>
<a href="#">ссылка на сайт</a>
</div>
</body>
</html>
Это интересно
0
|
|||
Последние откомментированные темы:
-
Где бесплатно брать заказы в интернете? | Фриланс | Поиск удаленной работы
(2)
EVG90
,
16.07.2020
-
Совет дня. Как открыть ссылку в новой вкладке или окне?
(1)
master284
,
02.05.2020
-
Ремаркетинг
(1)
atikih
,
28.06.2019
-
Проверка позиций сайта в поисковиках. Топ инспектор
(1)
master284
,
13.01.2019
20240420050520