I'm trying to build a website to showcase multiple videos on different pages. My goal is to have something like youtube, where the video autoplay and if you turn on sound, the next video you click will play with sound.

I managed to achieve this with cookies and it's working great in Chrome, but not in Safari: when the video is unmuted, it wont play.

Is there a specific code I need for this to work with safari?

Here's the website: https://ameliehaeck-0c50a96d5054d30ab9f31508ec1.webflow.io/ (Click on link 1 to 3 to see a video)

And here's my code:

if (Cookies.get("soundMode") == "sound-on") {
    let myVideo = $('#video');
  $('.sound').toggleClass('hide');
  $('#soundon').toggleClass('active');
  myVideo.prop('muted', false);
}

$('.sound').on('click', function() {
  let soundActivation = $(this).attr('data-sound');
  Cookies.set("soundMode", soundActivation, { expires: 365 });
  let myVideo = $('#video');
  $('.sound').toggleClass('hide');
  $('#soundon').toggleClass('active');
  if ($('#soundon').hasClass('active')) {
    myVideo.prop('muted', false);
  } else {
    myVideo.prop('muted', true);
  }
});

Thanks!