Партнеры: Форум об анонимности и безопасности в сети. Всегда свежие списки прокси. | SMS активации, виртуальные номера |
Instaplus.me - лучший сервис для продвижения в Инстаграм. 5 дней бесплатно в Инстаплюс. |


Прошу помощи специалистов html+css

Статус
В этой теме нельзя размещать новые ответы.

Inbev92

Пользователь
Регистрация
3 Дек 2015
Сообщения
37
Симпатии
975
Здравствуйте.
Возникла проблема при создании видео фона для одностраничного резинового сайта. Я ниже опишу что должно быть, что я сделал и покажу что с этого вышло.

Требуется:
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. Модератор, перенесите, пожалуйста тему, если я не в том разделе создал.
 
Последнее редактирование:

diesel3993

Пользователь
Регистрация
12 Июн 2015
Сообщения
49
Симпатии
283
Последнее редактирование модератором:

Статус
В этой теме нельзя размещать новые ответы.
Сверху