[Support request] MP4 Video file not working in Chrome and Firefox, But just fine in Safari

Home Forums Support MP4 Video file not working in Chrome and Firefox, But just fine in Safari

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1283206
    Martijn

    Hi Guys/Girls,

    Purchased your theme (Premium) and had one question which is doing my head in.

    I added a MP4 video file as header.

    And it works perfect in Safari browser but not in Chrome or Firefox.

    Have a look: https://gyazo.com/88b8923511beaec093b9d3cbe471eadb

    But in Firefox and Chrome it shows up like this.

    https://gyazo.com/1aec0c8c5e7edec7b5d2ba8a250e7356

    – Cleared all browser catches etc.

    How am I able to get this to work?

    Thank you,
    Martijn van Eijk

    #1283392
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    I’m actually surprised that’s working in Safari. Background images shouldn’t be able to accept videos.

    Are you wanting the video to be the background of the site header area only?

    If so:

    1. Create a new Hook Element: https://docs.generatepress.com/article/hooks-element-overview/

    2. Add this as the content:

    <video loop muted autoplay poster="URL/TO/poster.jpg" class="background-video">
        <source src="URL/TO/video.mp4" type="video/mp4">
        <source src="URL/TO/video.webm" type="video/webm">
        <source src="URL/TO/video.ogv" type="video/ogv">
    </video>

    3. Set the hook to before_header_content.

    4. Set the Display Rules.

    5. Add this CSS to your site:

    .background-video {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0.5;
    }
    
    .site-header {
        position: relative;
        overflow: hidden;
    }
    
    .site-branding, .site-logo, .header-widget {
        position: relative;
        z-index: 1;
    }
    
    video[poster] {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    Let me know if you need more info 🙂

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