custom class on that color-section is: html5-video
<video autoplay loop muted playsinline class="responsive-video">
<source src="https://webers-testseite.de/wp-content/uploads/Traffic-6456.mp4" type="video/mp4">
Dein Browser unterstützt das Video-Tag nicht.
</video>
<!-- Text Overlay -->
<div class="overlay">
<h2>Flexbox Centered Heading</h2>
<p>This text is perfectly centered with Flexbox.</p>
</div>#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: auto;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
padding: 10px;
border-radius: 10px;
background-color: rgba(255,255,255,0.5);
backdrop-filter: blur(5px);
white-space: nowrap;
}
@media only screen and (max-width: 767px) {
#top .html5-video .overlay {
top: 65%;
}
}
#top .html5-video .overlay > * {
flex: 1 1 100%;
line-height: 1.5rem
}
#top .html5-video h2 {
font-size: min(max(1rem, calc(1rem + (3 - 1) * ((100vw - 20rem) / (93.75 - 20)))), 3rem);
min-height: 0vw;
margin-bottom: 0;
}
#top .html5-video p {
font-size: min(max(0.75rem, calc(0.75rem + (1.5 - 0.75) * ((100vw - 20rem) / (93.75 - 20)))), 1.5rem);
font-weight: 700;
min-height: 0vw;
margin: 0;
}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