Hi all,
I’ve read several topics that helped me embed a background video on my site using Dropbox. At one point, I came across an issue: the video displayed properly on all browsers except on Safari where it didn’t show up, although I could right click it and open it in other tabs using its direct URL.
The issue came from a conflict between " max-width " and " height " parameters. I figured using only " max-width " solved my problem.
Here is the code that allowed me to display my video (and thumbnail) properly, in case it is useful for anyone else. Of course " max-width " has to be set according to your specific needs. Also, remember to keep " ?raw=1 " after your video URL for it to display correctly, otherwise it won’t work.
<video id="bg-video" autoplay playsinline muted loop style="max-width:80%; display:inline; margin: 0 auto; object-fit: contain" poster="https://www.dropbox.com/.../Thumbnail.jpg?raw=1">
<source src="https://www.dropbox.com/.../video.mp4?raw=1" type="video/mp4"/></video>
Lastly, on another topic, from my experience some browsers do not display video colors the same way. My video was matching my background on Chrome but neither on Safari nor Firefox. If you come across this issue, I recommend converting your video to .webm. In that case, make sure to change " video/mp4 " to " video/webm " in your code.
Cheers,
0xjaiho