Adresse
Webers Webdesign
Ludwig-Schopp-Straße 27
53117 Bonn
Webers Webdesign
Kontakt
Mit dem Laden der Karte akzeptieren Sie die Datenschutzerklärung von Google.
Mehr erfahren
custom class to the color-section: html5-video
markup of code-block element
<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>css and layout of this page
#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>