mp4 Video
Video full Screen einbinden
HTML
<div class="news-video-caption">
<div class="title-box-main">
<h1>{newsItem.title}</h1>
<h2>{newsItem.teaser}</h2>
</div>
</div>
<div class="single-video">
<video autoplay loop>
<source src="fileadmin/video/video.mp4" type="video/mp4">
</video>
</div>
<br style="clear:left;"/></div>
CSS
.single-video {
float:left;
top: 0;
left: 0;
height: 100vh;
width: 100%;
overflow: hidden;
background:#000f16;
}
.single-video video {
height: auto;
width: auto;
min-width: 100%;
min-height: 100%;
object-fit: cover;
opacity: 0.6;
-webkit-transition: 25s;
-moz-transition: 25s;
transition: 25s;
}
.news-video-caption {
position:absolute;
top: 0;
left: 0;
height: 100vh;
width: 100%;
overflow: hidden; z-index:11;
}
video {
height: auto;
width: auto;
min-width: 100%;
min-height: 100%;
object-fit: cover;
opacity: 0.6;
-webkit-transition: 25s;
-moz-transition: 25s;
transition: 25s;
}
