selfhosted video as color-section background video
on responsive case – we might leave fullwidth visibility of video – when content gets higher than the background.
on responsive case – we might leave fullwidth visibility of video – when content gets higher than the background.
because it is a color-section – you can drag and drop elements inside it – that means over your background-video. But if this content will get bigger in height on responsive case – the video must have a min-height option – and so it will be cut-off left and right.
Here the css codes for that case of a 16/9 video format
#top .avia-section[data-section-video-ratio="16:9"] {
height: 56vw !important;
display: flex !important;
flex-flow: column wrap;
justify-content: center;
}
#top .avia-section[data-section-video-ratio="16:9"] .av-section-cont-open {
position: relative;
top: 0;
padding: 120px 50px 0;
align-self: center;
}
/* === it might be neccessary to have for small screens an extra css === */
@media only screen and (max-width: 767px) {
#top .avia-section[data-section-video-ratio="16:9"] .av-section-cont-open {
padding: 130px 0 0 !important;
}
}
@media only screen and (max-width: 476px) {
#top .avia-section[data-section-video-ratio="16:9"] .av-subheading {
display: none
}
}or leaving responsiveness of background-video
? why at 533px ? – just because to have a smooth take over at 533px screen width – the height is 300px
min-height should be 300px – 16/9*300 = 533
@media only screen and (max-width: 533px) {
#top .avia-section[data-section-video-ratio="16:9"] {
min-height: 300px !important;
}
#top .avia-section[data-section-video-ratio="16:9"] .avia-video {
object-fit: cover;
}
}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