I need to open 4 Bootstrap modals (4.1 version) and autoplay a different Vimeo video on each one of them - Jquery

Johnny
August 1, 2022
232 views
0 votes
2 Answers

I’ve been using this solution by Franceso Borzi:

var videoSrc = $("#myModal iframe").attr("src");

$('#myModal').on('show.bs.modal', function () { // on opening the modal
  // set the video to autostart
  $("#myModal iframe").attr("src", videoSrc+"&amp;autoplay=1");
});

$("#myModal").on('hidden.bs.modal', function (e) { // on closing the modal
  // stop the video
  $("#myModal iframe").attr("src", null);
});

FYI: This snippet can be found on this thread: Bootstrap Modals & Youtube: Autoplay and Stop on Close:

It works when there is only one Vimeo video on the page. When I try to open a different video for each modal, the modals only play the latest video on the markup.

This is my code so far:

<div class="modal" data-modal-window id="modal-vimeo-01">
    <iframe id="v01" src="https://player.vimeo.com/video/726139458?h=02e309cac8" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
    <button data-modal-close class="close" data-dismiss="modal" aria-label="Close"><i class="icofont-close-circled"></i></button>
</div>

<div class="modal" data-modal-window id="modal-vimeo-02">
    <iframe id="v02" src="https://player.vimeo.com/video/723317173?h=8ce2334289" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
    <button data-modal-close class="close" data-dismiss="modal" aria-label="Close"><i class="icofont-close-circled"></i></button>
</div>


    <script>
    var videoSrc = $("#modal-vimeo-01 iframe").attr("src");

    $('#modal-vimeo-01').on('show.bs.modal', function () { // on opening the modal
    // set the video to autostart
    $("#modal-vimeo-01 iframe").attr("src", videoSrc+"&amp;autoplay=1");
    });

    $("#modal-vimeo-01").on('hidden.bs.modal', function (e) { // on closing the modal
    // stop the video
    $("#modal-vimeo-01 iframe").attr("src", null);
    });
</script>

<script>
    var videoSrc = $("#modal-vimeo-02 iframe").attr("src");

    $('#modal-vimeo-02').on('show.bs.modal', function () { // on opening the modal
    // set the video to autostart
    $("#modal-vimeo-02 iframe").attr("src", videoSrc+"&amp;autoplay=1");
    });

    $("#modal-vimeo-02").on('hidden.bs.modal', function (e) { // on closing the modal
    // stop the video
    $("#modal-vimeo-02 iframe").attr("src", null);
    });
</script>

I’m quite new to JS and Jquery, so any help would be much appreciated.
Thanks!

Answers

- cdold
- August 1, 2022 at 8:33 pm
- 0 votes
0
You problem will be most likely that you have 4 modals/videos that have the same class or id. Since I can’t see your code I can’t tell you where your mistake is, but that will be the problem for sure.

You should try it with having 4 id`s for your modals (like #modal1, #modal2, etc.) and and make sure that you select the correct video source, which you do in the first line:
```
var videoSrc = $("#myModal iframe").attr("src");
```
You would need something like
```
$("#modal1 iframe")
$("#modal2 iframe")
$("#modal3 iframe")
$("#modal4 iframe")
```
If this is not helping you, then you need to post your code. Because the code you posted is fine.

EDIT:

You are reacreating / overriding the videoSrc variable. You need to use unique names for these.
```
var videoSrc1 = $("#modal-vimeo-01 iframe").attr("src");
var videoSrc2 = $("#modal-vimeo-02 iframe").attr("src");
var videoSrc3 = $("#modal-vimeo-03 iframe").attr("src");
var videoSrc4 = $("#modal-vimeo-04 iframe").attr("src");
```
Login or Signup to reply.

- DanMullin
- August 1, 2022 at 8:54 pm
- 0 votes
0
The problem is with the scope of videoSrc

You set the value to src of the iframe of the first video

Then in the second script, you redefine videoSrc to be the src of the second iframe

The scope of videoSrc in both cases is the same.

These are equivalent:
```
- var videoSrc = “someUrl”;
- window.videoSrc = “someUrl”
```
So in your second script, videoSrc gets overwritten.

Each modal should have its own uniquely named source variable.

Edit: in order to handle this properly, you would do something like this:
```
var firstModalSrc = $(firstModalID iframe).attr(src)
$(firstModalID).on(…)

var secondModalSrc = $(secondModalID iframe).attr(src)
$(secondModalD).on(…)

…
```
Login or Signup to reply.