[Support request] Video background in elements – not getting full width

[Ketil]

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>

Velkommen til ditt nye ferieparadis

[David]

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

[Ketil]

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

[David]

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.

[Author]

Posts