Сейчас становиться креативным решением привлечения посетителя к своей странице установка изображений по методу параллакс и особенно видео фона.
Параллакс хорошо, но мне кажется, что мелькающее затемнённое изображение не только не отвлекает, а наоборот, вызывает желание понять, что там показали. Это только отвлекает от чтения и рассеивает внимание и концентрацию.
С другой стороны, медленно движущийся видео фон с чётким и ясным изображением создаёт миротворение и концентрацию в нужном месте.
Лучше один раз увидеть, чем долго слушать. Поэтому приглашаю увидеть как это работает на реальной странице моего сайта. В качестве видео использовано видео из YouTube.
https://servis.kharkov.ua/mi/pf.html
А теперь предоставляю для вас весь код видео фона, котоый вы видели на моём сайте. Скопируйте код и сохраните с расширением HTML. Кодировка utf-8 . Затем просто откройте в браузере и любуйтесь классным фоном. Можно помечтать о своём, глядя на этот фон, он располагает.
Будут вопросы, задавайте.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ВИДЕО фон в HTML 5</title>
<style>
* { box-sizing: border-box; }
.video-background {
background: #000;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -9;
}
.video-items, .video-background iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
@media (min-aspect-ratio: 16/9) {
.video-items { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
.video-items { width:300%; left: -100%; }
}
.oblaka{
font-size: 4em;
font-weight:bold;
color:red;
text-align:center;
}
</style>
</head>
<body>
<p class="oblaka">ВИДЕО фон в HTML 5</p>
<body>
<div class="video-background">
<div class="video-items">
<iframe src="https://www.youtube.com/embed/AdeUCueLbwY?autoplay=1&loop=1&enablejsapi=1&playerapiid=featuredytplay
er&controls=0&modestbranding=1&rel=0&showinfo=0&color=white&iv_load_po licy=3&theme=light&wmode=transparent&playlist=R_sqeos3J_s&mute=1"
frameborder="0" allow="autoplay" ></iframe>
</div>
</div>
</body>
</html>
Это интересно
0
|
|||
Последние откомментированные темы:
-
За физическим миром существует волновой мир.
(1)
Alex2436
,
19.02.2022
-
Находка.
(1)
zalozni
,
16.02.2022
-
«Тунгусский Феномен» - дело рук Николы Теслы. (Завещание).
(1)
Валерий !!
,
27.01.2022
-
А народ пока терпит.
(1)
kauperwud
,
06.12.2021
-
Загадочные явления: Телепортация.
(1)
Вольдемар Ртищев
,
22.11.2021
20240426174327