title: Bootstrap - Want hide content's until modal loads
body: <p>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 <code>shown.bs.modal</code> event has been triggered. </p>
  
  <p>Pretty much a noob here, so I'm not sure how to do this. </p>
  
  <p>Modal:</p>
  
  <pre><code>&lt;div class="modal fade" id="&lt;?php echo $target; ?&gt;" tabindex="-1" role="dialog" aria-hidden="true"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;    
  
        &lt;div class="modal-body"&gt;
                  &lt;iframe class="test" id="vimeo" src="//player.vimeo.com/video/&lt;?php echo $id; ?&gt;" 
        frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;
      &lt;/iframe&gt;
        &lt;/div&gt;      
  
    &lt;div class="modal-footer"&gt;
      &lt;?php echo $name; ?&gt;
    &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>NOTE: READ COMMENTS ON ACCEPTED ANSWERED</strong></p>