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

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

Home Forums Support Video background in elements – not getting full width

  • This topic has 3 replies, 2 voices, and was last updated 2 months ago by David.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2005230
    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
    #2005259
    David
    Staff
    Customer Support

    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

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

    #2005309
    David
    Staff
    Customer Support

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.