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 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!
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?