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


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

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

Inbev92

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

Требуется:
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
Сообщения
48
Реакции
290
Реализация фонового видео
Для просмотра содержимого вам необходимо авторизоваться.

Рекомендации по видео фону
Для просмотра содержимого вам необходимо авторизоваться.
 
Последнее редактирование модератором:

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