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;
}
}