Okay
  Public Ticket #3987086
video background Iphone Issue
Open

Comments

  • genarocommunication started the conversation

    Hi,

    I encounter issue with video background on Apple Mobile Devices (Safari, Firefox and Chrome). It works perfectly on Androïd devices and desktop browsers, but on Apple devices it only shows the preview image.

    Versions : 

    WP 6.8.1
    Salient 17.1.0
    IOS 18.4.

    I've already seen these tickets:

    https://themenectar.ticksy.com//ticket/3821690/:

    https://themenectar.ticksy.com//ticket/3963281/

    https://themenectar.ticksy.com//ticket/3985892/

    But i haven't found any soluce.
    Iphone and Ipad are not in power saving mode.
    .webm, mp4 and .ogv videos are self hosted.
    "Disable Video Backgrounds On Mobile Devices" is off.

    Could you please help me?

    Thanks a lot!

    Best regards


  •  9,215
    Tahir replied

    Hey genarocommunication ,

    Thanks for reaching out! .

    Try passing the video through the Online Convertors if not yet passed and reduce the size of the video to check. 

    Also try playing the video url directly in the Mobile device and check: https://genaro.fr/wp-content/uploads/2025/05/agrigenomique-2.mp4

    Best,

     


    ThemeNectar Support Team 

  • genarocommunication replied

    Hi Tahir,

    Thanks for your answer!

    - Video passed through online convertors with size reduced: no effect.
    - Playing the videos url directly: it works.

    I also tried this :

    - 2 rows added in the page:

    - one with a "self hosted video"  element: it works.
    - one with settings "background video" and "full height row" on: it works.

    So the issue seems to occur only with the header background video.

    Hope this will help... Any other idea?
    I'm sure the soluce is very close :)

    Thanks for your help!

  •  9,215
    Tahir replied

    Hey Again,

    Could you confirm the Bundled plugins are updated as we released a patch related to this: https://themenectar.com/changelogs/salient.html#:~:text=Fixed%20page%20header%20to%20not%20load%20video%20on%20mobile%20when%20%22Disable%20Video%20Backgrounds%20On%20Mobile%20Devices%22%20theme%20option%20is%20active 

    Please update to the Latest Salient Theme Version.

    The current version of the theme is v17.2.0 (4/18/25) and the current version of the page builder is 7.8.2 . Salient versions older than v11 won't be compatible with WordPress 5.5.

    Here's the documentation on the available methods for updating Salient: http://themenectar.com/docs/salient/updating-salient/#methods

    To get a list of Bug Fixes and new Feature addons in the Latest Theme updates view change log here http://themenectar.com/changelogs/salient.html .

    Best.

     


    ThemeNectar Support Team 

  • genarocommunication replied

    Hey, hey again

    I updated the theme (and plugins) to 17.2.0 then clean the cache and navigation cache.

    Same issue :(

    My only soluce for now is to use a full height row as header.
    This doesn't fix the problem, but it makes the job :)

    Please let me know if i missed something.

    Best


  •  9,215
    Tahir replied

    Hey Again,

    Thanks again for working through this with me. 

    This could be a new issue. Escalating this to the developer for further response.

    Best 


    ThemeNectar Support Team 

  •  1,107
    ThemeNectar replied

    Hey genarocommunication!

    Can you provide a test page URL with the older video added to the page header instead of within a row, so we can observe the issue again?


    Thanks in advance

  • genarocommunication replied

    Hi ThemeNectar

    Here is a link to a portfolio test page with video background header settings:

    https://genaro.fr/applications/test-themenectar/

    Hope this will help.

    Let's hunt this weird issue :)

    Best

  •  1,107
    ThemeNectar replied

    Thanks genarocommunication!

    You can remove the test project now. Can you try seeing if adding the following snippet corrects the issue for you? You may have to clear your cache.

    #page-header-bg .nectar-video-wrap video {
      opacity: 1!important;
    }


    Kind regards

  • genarocommunication replied

    Hi ThemeNectar

    I added the code in the "General Settings" => "CSS/Script Related" => "Custom CSS Code" section and cleared cache.
    Is this the right place?

    Anyway, here are a few observations:

    - On Ipad and Iphone, preview image is loaded and appears first. But as soon as i touch the screen, video is launched.
    - On Ipad and Iphone, on a page with "Post Loop Builder / portfolio" element, videos are launched immediately.

    See https://genaro.fr/portfolio-quantum-landing/

    It seems we're gradually making progress :)

    Best regards