fancybox игнорирует видео src, обновленное через DOM

Question

Fancybox отображает мой локальный видеоконтент при нажатии.

Но сначала myscript.js изменяет src видео при условии = "устройство не мобильное" или аналогичное.

Отладчик Chrome показывает, что DOM имеетбыл обновлен новым URL-адресом, однако событие click по-прежнему воспроизводит старый URL-адрес видео в соответствии с исходным HTML-кодом.

HTML в виде

<a data-fancybox href="#safetyvideo" data-small-btn="false">
   <img class="card-img-top img-fluid" src="assets/images/DJI_0857.JPG" />
   <img class="card-img-top img-fluid" src="assets/images/play.png" />
</a>

<video poster="assets/images/safetyposter.jpg" width="640" height="360" controls preload="auto" id="safetyvideo"  style="display:none;">
   <source src="/myvideoHD.mp4" type="video/mp4">
   Your browser doesn't support HTML5 video tag. </video>

js-кода, который обновляет DOM ...

(function($) {

  // Override video to LD version.

  $("source").each(function() {

    var myHD = $(this).attr("src");
    $(this).attr('src', '/samples/home07LD.mp4');
    var thisLD = $(this).attr("src");
    console.log(myHD+' becomes '+thisLD);

  });

}(jQuery));

Answer 1

Во-первых, эта проблема вообще не связана с fancybox !!!Я не могу не подчеркнуть важность поиска истинной причины любой проблемы.В вашем случае это предельно просто - удалите style="display:none;" из вашего видео.Что ты видишь сейчас?Он отображает оригинальное видео, а не то, которое вы ожидаете.А это значит - fancybox работает правильно, выполняя то, что вам говорят - отображать оригинальное видео.

Теперь, почему источник видео не меняется?Поскольку видео уже загружено, и вам нужно указать ему, чтобы загрузить новый источник, например:

$(this).parent()[0].load();

Демо - https://codepen.io/anon/pen/jXEXmg?editors=1010