<video autoplay loop muted playsinline class="responsive-video">
<source src="https://webers-testseite.de/wp-content/uploads/About_Us_Video.mp4">
Dein Browser unterstützt das Video-Tag nicht.
</video>#top .html5-video .responsive-video {
width: 100%;
height: auto;
display: block;
}
.responsive #top #wrap_all .html5-video .container {
max-width: 100% !important;
width: 100%;
padding: 0;
}
#top .html5-video .content {
padding: 0;
}
#top .html5-video .overlay {
position: absolute;
width: 25vw !important;
height: 21.25vw;
min-width: 140px;
min-height: 119px;
max-width: 411px;
max-height: 349px;
top: 12vw;
left: 8vw;
padding: 15px;
border-radius: 20px;
background-color: rgba(0,0,0,0.1);
backdrop-filter: blur(6px);
}
@media only screen and (max-width: 767px) {
#top .html5-video .overlay {
top: 9vw
}
}
#top .html5-video .overlay img {
padding: 0;
margin: 0;
}
width and height settings of overlay are always in the aspect ratio of your image.
we had to set here the width to important – because on responsive case the column ( here the 2/5 column ) will go to 100% width.
btw: you can use poster option and different video formats:
<video controls poster="/images/w3html5.gif">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>Sie sehen gerade einen Platzhalterinhalt von Facebook. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenSie sehen gerade einen Platzhalterinhalt von Instagram. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen