video not loading via script on safari

问题:

I have a script that is supposed to show load a video only on desktops and display an image banner only on mobile. This works fine in firefox and chrome, but the video doesn't load at all on safari.

The console shows these errors :

[Error] TypeError: a.indexOf is not a function. (In 'a.indexOf(" ")', 'a.indexOf' is undefined)
    load (jquery.min.js:4:18902)
    Global Code (uiscripts:1:22070)

[Error] TypeError: undefined is not an object (evaluating '$.validator.addMethod')
    (anonymous function) (jquery.min.js:2:31697)

My html is:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(
  function() {
    var bgv = $('#bgvid');

    if (bgv.is(':visible')) {
      $('source', bgv).each(
        function() {
          var el = $(this);
          el.attr('src', el.data('src'));
        }
      );    
      bgv[0].load();
    }
  }
)
</script>

<style>
    .hidden {
    display: none;
    }

    @media screen and (min-width: 400px) {
      .hidden {
         display: block;
       }
    }
</style> 

<video id="bgvid" class="hidden hidden-xs" autoplay loop>
  <source type="video/mp4" data-src="my-video.mp4"></source>    
</video>

<img alt="" class="visible-xs" src="my-image.jpg" style="width: 100%; height: auto;" />