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

[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

[Tom]

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 🙂

[Author]

Posts