HTML5 Video Error on Safari

Design help Custom code
1

Hi!

On a collection template page I’ve created an auto playing background video, but on Safari the video doesn’t show up. The video is hosted on Dropbox.

Link to the page: https://showbock.webflow.io/produksjoner/natt-i-nisseland

And here is the Read-Only link to the project: https://preview.webflow.com/preview/showbock?utm_medium=preview_link&utm_source=designer&utm_content=showbock&preview=4e831a9611b45037023f46d9381d9f38&pageId=5f1156047f0993c07e7d0e7c&itemId=5f115614947e5b1b90d03ad5&mode=preview

The video and poster is added through the collection field, and I’ve listed the links to those below as well.
Here is the code for the video:

<video autoplay muted loop playsinline id="myVideo" poster="[Background Video Poster]">
  <source src="[Background Video]" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

<style>
#myVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

From the collection page:

[Background Video Poster]:
https://uploads-ssl.webflow.com/5ee22a59a7df61584a399fdc/5fa3fe272a9fd5325a23fd43_Natt%20i%20Nisseland.jpg

[Background Video]:
https://www.dropbox.com/s/hgw86v424rp7151/Comp%201.mp4?dl=1

Any advice is appreciated!

2

dl=1 isnt actually correct.
Even though lots of posts say it is.
There is another parameter to use and its not dl=0

3

But I tought dl=1 worked fine? I can see the video on other browser. But if that isn’t correct, and not dl=0, then what should I use?