[Support request] Background Video for different browser

Home Forums Support [Support request] Background Video for different browser

Home Forums Support Background Video for different browser

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #2267340
    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 ;-/

    #2267512
    Fernando
    Customer Support

    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!

    #2284235
    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

    #2284638
    Ying
    Staff
    Customer Support

    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.

    #2294365
    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

    #2294764
    Fernando
    Customer Support

    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.

    #2294948
    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

    #2294974
    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

    #2295605
    Fernando
    Customer Support

    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?

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