javascript - Change Bootstrap modal video source dynamically

Question

I have a db keeping videos src and some information about video.

I'm taking those variable by while loop and passing to jquery script but even though video's src attributes are correct, videos are not playing the new source link.

I used the code given in Bootstrap Docs

This is the code that I'm using in the page

<div class="pb-2 pr-0 col col-xs-12 col-sm-6 col-md-3 col-lg-2 col-xl-2" id="item">
  <a href="#" data-toggle="modal" data-target="#exampleModal" data-user="9GAG" data-link="https://video.twimg.com/amplify_video/1343598947286183946/vid/720x900/Jg8plRtix-yjzP6g.mp4">
    <img class="rounded" src="https://pbs.twimg.com/amplify_video_thumb/1343598947286183946/img/_WUUCNjodgFAwfdw.jpg:thumb" alt="9GAG">
  </a>
</div>

**This is my Modal HTML**

<div id="myVideo">
    <video id="myVideo" width="1280" height="720" controls poster="" class="myvideo img-fluid">
        <source src="" type="video/mp4">
    </video>
</div>

This is JS

    $('#exampleModal').on('show.bs.modal', function (event) {
       var button = $(event.relatedTarget)
       var link = button.data('link')
       var user = button.data('user')
       var modal = $(this)
       moda1l.find('.modal-title').text(user)
       modal.find('.video source').attr('src', link)
    })    

I have searched topic for solution, there were some similar problems and solutions but as a rookie, I wasn't be able apply those solutions to my code. Thanks in advance for helps.

--Edit After Solution-- My final js code is like that:

//to pause the video if modal closed
$('#exampleModal').on('hide.bs.modal', function (event) {
   let video = document.getElementById('myVideo');
   video.pause();
});
$('#exampleModal').on('show.bs.modal', function (event) {
   var button = $(event.relatedTarget)
   var link = button.data('link')
   var user = button.data('user')
   var modal = $(this)
   modal.find('.modal-title').text(user)
   $('#myVideo source').attr('src', link)
   $('#myVideo')[0].load();
   //autoplay if modal opened
   $('#myVideo')[0].play();
})

question from:https://stackoverflow.com/questions/65642386/change-bootstrap-modal-video-source-dynamically

Answer 1

The selector for the source needs to change, and then load() the video...

$('#exampleModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget)
    var link = button.data('link')
    var user = button.data('user')
    var modal = $(this)
    modal.find('.modal-title').text(user)
    $('#myVideo source').attr('src', link)
    $('#myVideo')[0].load();
})

Demo