[Support request] Background Video for different browser

[Jan]

Hi David,

I’m using a background video on this page.

The video.webm is generally playing in Safari, Chrome and Firefox just fine. In Safari, however, the transparent video background (alpha) appears in black.

According to this post one way of solving this issue is to provide two different formats. I did upload the relevant files to the media library.

When I switch to the mp4 version, the video (incl. background) is playing well in Safari, but not in Chrome ;-/

What is the easiest way to make both versions available at the same time?

Any advice is much appreciated.

Best,
Jan

PS: In his threat Tom talked about a similar use case for different devices. I was hoping we can get away w/o a page hero ;-/

[Fernando]

Hi Jan,

To clarify, how are you adding the Video?

For reference, here’s the article with regards to adding a Background Video to the Page Hero in GP: https://docs.generatepress.com/article/page-hero-background-video/

Hope this helps!

[Jan]

Hi Fernando,

sorry for not getting back earlier.

This time I embedded the video using the Cover block.

I also worked with a Page Hero Element on a different site before and managed to display different versions of a video depending on device/ screen size. This however does not help when the web browser is dependency.

Any thoughts on how to tackle this are much appreciated.

Thanks in advance,
Jan

[Ying]

Hi Jan,

I inspected the link you provided, it doesn’t seem like you have added 2 video sources in the code, I can see only the webmvideo.

Here’s a guide on how to use GB container to add background video:
https://docs.generatepress.com/article/background-video/

In step1, you can add 2 video sources to the HTML code.

[Jan]

Hi Ying,

using a GP Blocks Container instead of a Cover Block is a great idea.

I used the tutorial article to set up the background video and added both the mp4 and webm version. This is the new block structure of the Page Hero section.

– I removed the <source src="URL/TO/video.ogv" type="video/ogv">from the custom HTML
– added the CSS class to a Grid instead of a Headline Block
– and added the CSS to the Customizer

The video is running fine in Safari. Chrome only shows the poster image.

Any thoughts on how I…

1: get the video enabled for Chrome and
2: can remove the gap between Header and Page Hero?

Thanks for your support in advance.

Regards,
Jan

[Fernando]

1. Can you check if the mp4 file is working? It seems to not be working from my end.
2. In Appearance > Customize > Layout > Container, try setting the top padding to 0px.

Kindly let us know how it goes.

[Jan]

Hi Fernando,

thanks for getting back.

ref. 1: I changed the sequence of the video sources to make the webm-version come first.

<video loop="" muted="" autoplay="" playsinline="" poster="https://b3qn4j.myraidbox.de/wp-content/uploads/Standbild_Quader_webgefaehrte_1zu1.png" class="background-video">
    <source src="https://b3qn4j.myraidbox.de/wp-content/uploads/Animation_Quader_webgefaehrte_1zu1-vp9-chrome.webm" type="video/webm"> 
    <source src="https://b3qn4j.myraidbox.de/wp-content/uploads/Animation_Quader_webgefaehrte_1zu1-hevc-safari.mp4" type="video/mp4">
</video>

As a result the video is now playing in Chrome just fine. In Safari, however, the transparency of the video now disappeared ;-( I’ll check with the folks from Rotato to see of there is something wrong with there mov to mp4 converter tool.

ref. 2: Perfect. Much better w/o the gap 😉

Best,
Jan

[Jan]

Hi Fernando,

feedback from Rotato came back instand. Both the mp4 and webm files work just fine. No issue with the converter tool.

I ran another set of tests:

A) Custom HTML block with only one video source (webm) –> Background video runs just fine in Chrome. In Safari one the poster is available.

B) Custom HTML block with only one video source (mp4) –> Background video runs just fine in Chrome. In Safari the video runs with a black background.

C) Custom HTML block with two video sources (mp4, webm – in this sequential order) –> Chrome shows the poster only. The background video runs just fine in Safari.

D) Custom HTML block with two video sources (webm, mp4 – in this sequential order) –> Background video runs just fine in Chrome. In Safari the video runs with a black background.

Any thoughts on how to fix that?

Many thanks,
Jan

[Fernando]

Hi Jan,

When I try to view the mp4 video on Chrome, it’s just black on my end which is odd. It plays as expected on Safari though. This is the link I’m referring to: https://b3qn4j.myraidbox.de/wp-content/uploads/Animation_Quader_webgefaehrte_1zu1-hevc-safari.mp4

This could be the cause of the issue.

To test, can you try using a different mp4 video and see how it goes?

[Author]

Posts