- This topic has 8 replies, 3 voices, and was last updated 1 year, 4 months ago by Fernando.
June 28, 2022 at 1:40 pm #2267340Jan
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.
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.
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 ;-/June 28, 2022 at 7:41 pm #2267512Fernando Customer Support
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!July 16, 2022 at 3:03 am #2284235Jan
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,
JanJuly 16, 2022 at 10:54 am #2284638YingStaffCustomer Support
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
Here’s a guide on how to use GB container to add background video:
In step1, you can add 2 video sources to the HTML code.July 26, 2022 at 11:35 am #2294365Jan
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.
JanJuly 27, 2022 at 12:34 am #2294764Fernando Customer Support
1. Can you check if the
mp4file is working? It seems to not be working from my end.
2. In Appearance > Customize > Layout > Container, try setting the top padding to
Kindly let us know how it goes.July 27, 2022 at 5:18 am #2294948Jan
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 😉
JanJuly 27, 2022 at 5:49 am #2294974Jan
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?
JanJuly 27, 2022 at 6:18 pm #2295605Fernando Customer Support
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?
- You must be logged in to reply to this topic.