Inbev92
Premium Lite
- Регистрация
- 3 Дек 2015
- Сообщения
- 39
- Реакции
- 1,004
- Тема Автор Вы автор данного материала? |
- #1
Здравствуйте.
Возникла проблема при создании видео фона для одностраничного резинового сайта. Я ниже опишу что должно быть, что я сделал и покажу что с этого вышло.
Требуется:
1 страничный сайт, без прокрутки, резиновый. То есть при входе на сайт пользователь видит только видео фон и небольшой текстовый блок с кнопкой. Сайт должен растягиваться по ширине и высоте. Так же и на мобильных устройствах, но там вместо проигрывания видео должен показываться постер.
Что сделал я:
Как он отображается в разных браузерах(ссылки на скрины):
В итоге, прошу совета, ссылки на статью, или кусок кода, что бы работало как положено.
Заранее спасибо.
P.S. Модератор, перенесите, пожалуйста тему, если я не в том разделе создал.
Возникла проблема при создании видео фона для одностраничного резинового сайта. Я ниже опишу что должно быть, что я сделал и покажу что с этого вышло.
Требуется:
1 страничный сайт, без прокрутки, резиновый. То есть при входе на сайт пользователь видит только видео фон и небольшой текстовый блок с кнопкой. Сайт должен растягиваться по ширине и высоте. Так же и на мобильных устройствах, но там вместо проигрывания видео должен показываться постер.
Что сделал я:
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<video poster="poster.jpg" autoplay="true" loop muted>
<source src="flowers.mp4" type="video/mp4">
<source src="flowers.webm" type="video/webm">
</video>
<div class="text">
lorem
</div>
</div>
</body>
</html>
Код:
body, html {
margin:0;
padding:0;
}
video {
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width:100%;
min-height:100%;
height:auto;
width:100%;
z-index:1;
}
.text{
z-index:2;
position:absolute;
background: rgba(0,0,0,0.6);
top:0;
bottom:0;
left:0;
right:0;
}В итоге, прошу совета, ссылки на статью, или кусок кода, что бы работало как положено.
Заранее спасибо.
P.S. Модератор, перенесите, пожалуйста тему, если я не в том разделе создал.
Последнее редактирование:
