I have set up a video slider on my webpage. You can view the site The code is functioning perfectly on Chrome and iOS Safari, but there seems to be an issue on desktop browsers. When inspecting the page in Safari, the video elements are present in the HTML and even highlight where they should be displayed. The text element changes accordingly based on the video being shown, indicating that the slider is working properly. However, I am puzzled as to why the videos are not displaying at all in Safari. My assumption is that it might be related to incorrect sizing? The slider is created using vanilla JavaScript and CSS, and it displays well with fully functioning sliders on iPhones.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
<link rel="stylesheet" href="/css/style.css">
<link rel='stylesheet' href='css/mobile.css' />
<title>Shek Leung</title>
</head>
<body class="animate__animated animate__fadeIn">
<section class="projects-container">
<nav>
<div class="proj__nav">
<a href="#archiveFilms" data-tab-target="#archiveFilms" class="archiveFilms active-proj">Archive Films</a>
<a href="#soundDY" data-tab-target="#soundDY" class="dearYou link-color">Sound: Dear You</a>
<a href="#soundDS" data-tab-target="#soundDS" class="directorSt link-color">Sound: Final Director's
Statement</a>
</div>
<a href="/index.html" class="proj__back link-color">Back</a>
</nav>
<main class="projects-main">
[…]
</section>
<script src="js/projects.js"></script>
</body>
</html>
Javascript
[Javascript code snippet]