Issue with background video on mobile inconsistently playing

[wowflak]

Hi,

I have added some code in the “custom code” section of the background layer. It works sometimes on iphone ios 15 but usually does not load right away then does on reload. It is like it skips it. I added a image on lower layer in case it skips it. But it is strange. Here is code:

<code><video playsinline autoplay muted loop poster="/wp-content/uploads/2021/10/aliceposter.jpg" id="gavideo">
  <source src="/wp-content/uploads/2021/10/GA-MidYears-30sec-1920x1080noaudio.mp4" type="video/mp4">
</video>

<style>
#gavideo {
    position: fixed;
    left: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    top: 0;
}
@media(max-width:600px){
#gavideo {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}
}
</style></code>

Site is here:

George Alice | Official Site

Note I have 2 sections one for mobile and one for desktop. The mobile one is the issue. For desktop I just used the video option in background layer. When I tried my code for both it also seemed like it “skipped” the video and just showed blank…

[christian]

Hey @wowflak,

Please note that we do not officially support video background playing on mobile though it might work. This is why we have the Video Poster option.

Just stay tuned maybe browsers will have an efficient way to play video backgrounds in a future update.

Thanks.

[wowflak]

Thanks, it does work just not always. Seems like it is skipping over the video. I have another site built with Pro where I bypassed the pro builder and it works no issue which is why I was wondering if it was something in the way the builder works. I would bypass however it is in a Pro section and not the entire page…

[friech]

Hi @wowflak,

I’ve just check your homepage and the banner video works fine on both desktop and mobile? Maybe this issue only happening to specific mobile/browser? Can you test it on a different device other than the one you’re using?

Thanks,