Fancybox displays my local video content on click.
But first, myscript.js modifies video src on condition= "device not mobile", or similar.
Chrome debugger shows DOM has been updated with the new URL, however click event still plays the old video url as per original html code.
HTML as
<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 code that updates the 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));
First, this issue is NOT related to fancybox at all!!! I cannot stress enough the importance of finding the the real cause of any problem. In your case, it is extremely simple - remove style="display:none;" from your video. What do you see now? It displays the original video, not the one you would expect. And that means - fancybox works correctly by doing what you tell it to do - to display the original video.
Now, why video source is not changing? Because video is already loaded and you need to tell it to load the new source, like this:
$(this).parent()[0].load();