0

I'm using jquery modal to load multiple vimeo video's in a single page. I've been noticing that all the video's loading (34) in the DOM affects performance (creating a lag on load). So I want make sure that the video players are only loaded when the shown.bs.modal event has been triggered.

Pretty much a noob here, so I'm not sure how to do this.

Modal:

<div class="modal fade" id="<?php echo $target; ?>" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">    

      <div class="modal-body">
                <iframe class="test" id="vimeo" src="//player.vimeo.com/video/<?php echo $id; ?>" 
      frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
    </iframe>
      </div>      

  <div class="modal-footer">
    <?php echo $name; ?>
  </div>

    </div>
  </div>
</div>

NOTE: READ COMMENTS ON ACCEPTED ANSWERED

dvoutt
  • 930
  • 2
  • 9
  • 23
  • So you want the modal to open before it starts loading the video inside of the iframe, that is inside the modal, correct? – Tricky12 Jul 22 '14 at 16:32
  • Pretty much. I want to make sure that either the iframe only gets loaded when the user requests it. I should also add that when the user closes the modal ideally the video would stop playing as the iframe is removed or src changed. This way there isn't multiple videos playing or loading in the background slowing performance. – dvoutt Jul 22 '14 at 16:46

3 Answers3

2

I believe I have found a solution. Here is a working demo. If you check the networking section of your browser you will notice they do not load until the corresponding modal opens.

You can initially leave the src of your iframes empty, so it won't load anything. Store your URLs inside of an array and then you can use an event handler on the shown.bs.modal event as you mentioned.

var iframes = ["URL1","URL2","URL3"];

$('.modal').on('shown.bs.modal', function() {
    var id = $(this).data('id');
    $(this).find('iframe').attr('src',iframes[id]);
});

You will notice I am referencing a data-id, which you can add to each of your modals very easily.

<div class="modal fade" id="modal1" data-id="0" tabindex="-1" role="dialog" aria-hidden="true">

<div class="modal fade" id="modal2" data-id="1" tabindex="-1" role="dialog" aria-hidden="true">

I started with 0, since arrays start with 0 index.

***Note - The downfall to this is that the iframe will have to load the URL EVERY TIME you open the corresponding modal.

EDIT: Actually, using another data attribute, you can avoid the issue of URLs loading every time. Updated demo.

<div class="modal fade" id="modal1" data-id="0" data-loaded="false" tabindex="-1" role="dialog" aria-hidden="true">

Check the attribute in the shown.bs.modal event before replacing the URL if it is already loaded.

$('.modal').on('shown.bs.modal', function() {
    var loaded = $(this).data('loaded');

    if(loaded == false) {
        var id = $(this).data('id');
        $(this).find('iframe').attr('src',iframes[id]);

        $(this).data('loaded', 'true');
    }
});

EDIT 2 - With IDs in a php array, you can convert them to a JS array like this:

var iframes =<?php echo json_encode($php_array);?>;
Tricky12
  • 6,752
  • 1
  • 27
  • 35
  • This is good but there is still on issue I'm running into, the video is still playing when the modal has been closed. This is a situation where the user will watch multiple videos in a row but may not be savvy enough to stop the video before closing the modal. – dvoutt Jul 22 '14 at 18:13
  • @dvoutt How are you closing the modals? In the JSFiddle I made, the videos stop when the modal is closed (by clicking outside of the modal window). – Tricky12 Jul 22 '14 at 18:52
  • Yep, pretty much the only way given no close buttons. This is a bit complicated to work with given that I'm throwing PHP into the modal and you're using a javascript array to store the urls. I've setup the following code which works well for closing the modal. `var modal = $('.modal');` `var vidsrc = modal.find('iframe').attr('src');` `$(modal).on('hide.bs.modal', function() { $(this).find('iframe').attr('src', ''); });` – dvoutt Jul 22 '14 at 18:52
  • @dvoutt Yes, that should work. However, be aware that doing it that way will require you to re-load the src every time the modal is opened. Otherwise, you would not have a src for your iframe any time after the first opening. – Tricky12 Jul 22 '14 at 19:05
  • This is very true, but it's better than have confused users who don't understand why the video is playing in the background and potential plays two videos at the same time. How do you suggest I get the PHP array of video IDs/URLs into your javascript so that it only loads the data upon click? – dvoutt Jul 22 '14 at 19:07
  • It looks like you know how many videos you have, 34. I would recommend looping with php and storing each one into the javascript array. I will update my answer to include the code. I'm a bit rusty with php, so it might not be exactly correct syntax. – Tricky12 Jul 22 '14 at 19:11
  • I now see the issue you were talking about, you can't watch the video after it has been closed the second time. I misinterpreted your message from before. Guess I'll need to think of another way of addressing the issue. – dvoutt Jul 22 '14 at 19:28
  • Have you tried adding a close button to your `modal-footer` to see if it will make the video stop on close? ``. If that works, you won't have to remove, then re-add the iframe src. – Tricky12 Jul 22 '14 at 19:33
  • Sorry was getting the code implemented, from my testing the close button doesn't stop the video from playing. There is an issue with the update for loop in javascript, there are 34+ videos but their ID's are not an iteration from 0-34, their ID's are given by vimeo and stored in a PHP array with values such as "100524765" (random vimeo video). – dvoutt Jul 22 '14 at 19:58
  • So you have all of them in the PHP array? THen this should convert it to JS for you: `var iframes =;`. – Tricky12 Jul 22 '14 at 20:04
  • 1
    Doesn't quite work, because of the iteration, but I did figure out the code to make that work. `var iframes = new Array(); iframes.push(''); `. Bit of a combo deal. – dvoutt Jul 22 '14 at 20:07
  • Good deal, glad it is working! I'm not sure how else to help with the videos not stopping; wish I could help with that. – Tricky12 Jul 22 '14 at 20:10
  • Thanks you have been a big help getting the performance to work better and getting my work to work through it better. I'll figure out the video from here! – dvoutt Jul 22 '14 at 20:19
0

To stop the video from playing when the modal is closed, do the same thing in reverse:

$('.modal').on('hide.bs.modal', function() {
    $(this).find('iframe').attr('src', '');
});
carrucha
  • 21
  • 1
-1

To clear modal when its closed use

$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});

For the other part not too sure on what your trying to do. You could look into jScroll so that it will only load the rest of the videos when the user starts to scroll through the modal.

Edit: You could load the content of your modal from an external html file, that way the video iframe will only be loaded when someone clicks on the modal link.

Bosc
  • 1,499
  • 1
  • 13
  • 20