Bootstrap - Want hide content's until modal loads


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.


<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>



I believe I have found a solution. <a href="http://jsfiddle.net/m2QVT/" rel="nofollow"> Here is a working demo</a>. 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. <a href="http://jsfiddle.net/m2QVT/1/" rel="nofollow">Updated demo</a>.

<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);?>;


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.


  • Setting breakpoints in viewmodels in Durandal
  • how do I store a youtube embed link in a database
  • Convert youtube url to iframe embed code
  • How to hide the URL Of Custom Tab?
  • CKEditor and iFrame/YouTube/Other Embed Plugins Show Weird HTML Code
  • Client-Side: Accessing Windows Azure Drive?
  • Handle Authentication and Authorization in jax-rs webservice with cxf
  • EOFError, what happen to my minitest selenium test? how to fix it?
  • How can I filter REST calls results based on Roles and current user context in Loopback (server side
  • Keep transition effect on 1 div from moving the div that follows?
  • Neo4j one-to-many fetch data
  • Change navbar in bootstrap if user login
  • Yii2 Login with database
  • Javascript Array, Object, Date not defined
  • Action Pack components in Rails
  • Is there a way to dynamically embed PDF Files in a JSP pulled from the file system?
  • HTML5 video only works in IE. The other browsers shows the black screen
  • How to view images from protected folder with php?
  • Button click event not firing in jQuery
  • Detect when Facebook like button is clicked
  • Alternative To body {overflow:scroll;} That Will Prevent Page Jostling/Wriggling?
  • Display images in Django
  • Play WS (2.2.1): post/put large request
  • Display issues when we change from one jquery mobile page to another in firefox
  • Deselecting radio buttons while keeping the View Model in synch
  • Align navbar back button on right side
  • DotNetZip - Calculate final zip size before calling Save(stream)
  • Resize panoramic image to fixed size
  • MySQL WHERE-condition in procedure ignored
  • JSON with duplicate key names losing information when parsed
  • Importing jscolor library in angular 2
  • Adding custom controls to a full screen movie
  • Jquery - Jquery Wysiwyg return html as a string
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • Load html files in TinyMce
  • Free memory of cv::Mat loaded using FileStorage API
  • How to set the response of a form post action to a iframe source?
  • EntityFramework adding new object to nested object collection
  • How to Embed XSL into XML
  • playing video using jmf