Webm HTML5 Video embed not working on Chrome

Design help Custom code
1

Hey all! I am seeking your wizarding expertise to solve this bug.

Setting the Scene:
I am trying to display a webm and an mp4 file for this transparent HTML5 video embed. The webm and mp4 files are hosted externally using a service called Cloudinary. If you copy the source file url from the embed and paste it into your browser you will see that the files are working correctly and being hosted properly.

The Issue:
The webm file that displays in Google Chrome does not seem to be working correctly on the live website. I am trying to troubleshoot and figure out why this file is not working correctly. Any and all help is appreciated!

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

2

Hi @Gabe_Tiger,

It looks like there’s a problem with the first video link: https://res.cloudinary.com/dhebo0ged/video/upload/v1664410522/VOUCH_Homepage_Hero_v05_alpha-hevc-safari_ilojdk.mp4

The video isn’t playing for me and it’s not working in JSFiddle, when I remove the first video source tag the video element starts working.

1 Like
3

Hi @mww ,

Thanks for the response! The first video link is meant to execute only on Safari. You are correct in that removing the first video source tag allows the video to work correctly on chrome. However, if you open the project url in Safari, the video file becomes a static image because the video source is gone.

Ideally, I need a solution that can serve each video link depending on which browser is being used. Maybe using JS is the solution?