Archived topic
Video background in elements - not getting full width
3 replies · Started by Ketil on November 15, 2021
Using this in elements to display video background on front page. I can't the video to span full width, what can be wrong?
Here's code
<video loop muted autoplay poster="URL/TO/poster.jpg" class="background-video">
<source src="/wp-content/uploads/2021/11/Soleidet_overlay.mp4" type="video/mp4">
</video>
Hi there,
You're CSS is only being applied on mobile - it looks like this:
@media (max-width: 768px) {
.inside-header>:not(:last-child):not(.main-navigation) {
margin-bottom: 0;
}
.background-video {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
}
.page-hero {
position: relative;
overflow: hidden;
}
.background-video-content {
position: relative;
z-index: 1;
}
video[poster] {
object-fit: cover;
width: 100%;
height: 100%;
}
}Change that to:
.background-video {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
}
.page-hero {
position: relative;
overflow: hidden;
}
.background-video-content {
position: relative;
z-index: 1;
}
video[poster] {
object-fit: cover;
width: 100%;
height: 100%;
}
@media (max-width: 768px) {
.inside-header>:not(:last-child):not(.main-navigation) {
margin-bottom: 0;
}
}Then edit your Header Element, and give it some Top and Bottom padding - to give it some height
It does something to height of header, looks like it's the below part affects height of video:
@media (max-width: 768px) {
.inside-header>:not(:last-child):not(.main-navigation) {
margin-bottom: 0;
}
}
You need to edit the Header Element - see here:
https://docs.generatepress.com/article/header-element-overview/#page-hero
And in the Padding -> Top and Bottom fields you need to add some values. Those values are what give the video its height.
