<video autoplay loop muted playsinline class="responsive-video">
<source src="https://webers-testseite.de/wp-content/uploads/Time-Lapse.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 {
transition: top 3s ease
}
#top .html5-video .overlay {
position: absolute;
width: auto !important;
top: calc(100% - 200px) !important;
right: 50px;
padding: 15px;
margin: 0 !important;
/* === if you do not like to have background and blur remove this === */
border-radius: 20px;
background-color: rgba(255,255,255,0.1);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
@media only screen and (min-width: 1650px) {
#top .html5-video .overlay {
top: calc(100% - 450px) !important;
}
}
#top .html5-video .overlay p {
margin-bottom: 0 !important;
}
@media only screen and (max-width: 549px) {
#top .html5-video .overlay {
padding: 10px;
}
#top .html5-video .overlay .av-special-heading-tag,
#top .html5-video .overlay p {
font-size-adjust: cap-height 0.5 !important;
line-height: 1.3em !important;
margin: 0
}
#top .html5-video .overlay {
top: calc(100% - 150px) !important;
}
}
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>Webers Webdesign
Webers Webdesign
Ludwig-Schopp-Straße 27
53117 Bonn
Mit dem Laden der Karte akzeptieren Sie die Datenschutzerklärung von Google.
Mehr erfahren