Есть video
с прозрачным постером, описанием и фоновой картинкой к нему на всю ширину.
В chrome
все смотрится так, как и задумано, только хотелось бы, чтобы воспроизведение видео начиналось при клике на любую его область, в том числе и описание.
Но, в firefox
и edge
все выглядит иначе - бекграунд плеера сплошной черный, а не прозрачный и не видно самого описания. Как это исправить?
Код:
#video {
background: url("https://i.ytimg.com/vi/zf-GMvFd154/maxresdefault.jpg") no-repeat center center;
background-size: cover;
width: 100%;
position:relative;
}
#video .video-description {
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
max-width: 550px;
font-weight:bold;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<section id="video">
<div class="container text-center">
<div class="video-description">
<h4>Lovely Video</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dignissimos, asperiores corrupti quaerat ea sequi. </p>
<span>00:10</span>
</div>
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item " width="100%" controls poster="data:image/gif,AAAA">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
</div>
</section>