Использование JavaScript для автовоспроизведения фонового видео на сайте Wordpress

У меня есть сайт WordPress с шаблоном, который я не разрабатывал. Таким образом, я не могу напрямую редактировать код или стили шаблона. К счастью, шаблон позволяет настраивать Javascript в верхнем и нижнем колонтитуле, а также настраивать css с помощью WP customizer.

У меня возникли проблемы с воспроизведением фонового видеоэлемента - особенно на мобильных устройствах и, более конкретно, на iPhone (независимо от браузера). Я нашел несколько примеров использования playinline для конкретной проблемы iPhone, а также для замены видеоисточника на мобильных устройствах и принуждения к воспроизведению мобильной версии видео. Это сработало, но на iPhone это очень неперфорирование. То, что происходит, это плакаты, а затем оригинальное видео, а затем мобильная версия. У меня такое чувство, что это просто из-за того, что я выполняю свой JS, и надеялся, что кто-то сможет взглянуть и помочь мне разобраться, куда я сбиваюсь с пути по очистке.

HTML:

<div class="hero" id="hero" style="background-image: 
url('http://www.#sitename#.com/wp-content/uploads/2018/06/poster.png')"
<div class="visible-lg visible-md">
<video preload="auto" autoplay="" loop="" 
poster="http://www.#sitename#.com/wp-content/uploads/2018/06/poster.png" 
id="bgvid" class="bgvid" playsinline="">
<source src="https://player.vimeo.com/external/video.hd.mp4" 
type="video/mp4">
</video>
</div>

JavaScript:

<script>
window.onload = function() {
  if (/* conditions */ window.innerWidth < 768) 
    document.querySelector("video").src = "https://player.vimeo.com/external/MobileVideo.hd.mp4";
}

var vid = document.getElementById("bgvid");
function playVid() {
vid.setAttribute('playsinline', '');
vid.muted = true; 
vid.autoplay = true;
vid.loop = true; 
vid.load();
vid.play();
}
playVid();

</script>