Background Video hosted on Dropbox not working on ios devices

[So97 (Sophie J.)]

Hello,

I need some help to show background videos on IOS devices. I use this code below but still not working no matter what (I tried to disable low battery mode, with playsinline attribute, etc.)

<video id="bg-video" autoplay playsinline muted loop style=" width:100%; height: 100%; display:block; margin: 0 auto; object-fit: contain;"> 
<source src="https://www.dropbox.com/s/hty64meh29zfvph/pantry-interaction-sample-1.mov?dl=1" type="video/mp4"/><img src="https://www.dropbox.com/s/rhh75hg1nopg8mf/pantry-interaction-sample-1.png?dl=1"></video>

Also, the poster does not work either when the video not working which leaves a large blank space on the page.

If someone has an idea on how to fix this it would be greatly appreciated.

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[cyberdave (Dave S.)]

Hi @So97,

I hope you are doing well, I checked on iOS and made some observations:

There appears to be a problem with the embed where the image img src for the poster image is unknown:

In the collection item for the page shared in the read only link, the Video Poster Slug 2 field used in the embed is missing a value:

Here is also another post that shows how to create a responsive html video embed: [Tutorial] Responsive Video using HTML Embed, I would suggest to use this method for your video.

I hope this helps

[So97 (Sophie J.)]

Hello @cyberdave

Thank you for the support. I focused my efforts on the third video, the one embed on the mobile phone skin. So I had only provided an image for video 3, at least, until I have a solution.

Thank you for the tutorial I’ll keep it in mind for another case.

Anyway, I’m happy to announce that I’ve resolved my issue. After some try, I’ve finally figured out the issue comes from Dropbox. Thank you again @cyberdave.

I was using “dl=1” at the end of the URL but it seems I have to use the “raw=1” method in my case.
See this post to learn more.

Sorry, it’s in french but I think you can find it in English too.

After this, all works perfectly well both on desktop and IOS, Safari, Chrome and Android.

Even in Low power mode (it shows up the play button which is okay for me)

Here is the code I use

<video id="bg-video" autoplay playsinline muted loop style=" width:100%; height: 100%; display:block; margin: 0 auto; object-fit: contain;" poster="https://www.dropbox.com/s/yqqzgj1vnd0sp6o/pantry-interaction-sample-1.jpg?raw=1"> 
<source src="https://www.dropbox.com/s/aq204foi19xeanw/pantry-interaction-sample-1-vfast.mp4?raw=1" type="video/mp4"/></video>

Hope this will help somebody else that using Dropbox.

[cyberdave (Dave S.)]

Hi @So97 awesome news, great to hear and thanks for sharing that about Dropbox.

Cheers