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

Inbev92 · 25 Дек 2015

Здравствуйте.
Возникла проблема при создании видео фона для одностраничного резинового сайта. Я ниже опишу что должно быть, что я сделал и покажу что с этого вышло.

Требуется:
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;
}

Как он отображается в разных браузерах(ссылки на скрины):

Google chrome PC
MS Edge
Chrome Android

В итоге, прошу совета, ссылки на статью, или кусок кода, что бы работало как положено.
Заранее спасибо.

P.S. Модератор, перенесите, пожалуйста тему, если я не в том разделе создал.