title: What is the most efficient way to load YouTube videos through jQuery on a user click?
body: <p>I'm trying to determine what is the most efficient way to load videos into a  on a user click using jQuery. </p>
  
  <p>To give more context behind this, I'll have about 30 clips on YouTube that are each between 30-60seconds and I'd like to dynamically load them into a div on the right hand side of the page as the user browses the topics and potential video clips on the left hand side. </p>
  
  <p>Right now, I've setup this HTML and jQuery. It works but I'm curious if there is a better method: </p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="details_left"&gt;
          &lt;div class="cluster"&gt;
              &lt;a href="#" id="johnk" class="vid_trigger"&gt;&lt;div class="title"&gt;The importance of demonstrating intellectual curiosity&lt;/div&gt;&lt;/a&gt;
              &lt;div class="role"&gt;John K: Summer Consultant, BCG&lt;/div&gt;
              &lt;div class="summary"&gt;Discussion on how curiousity is important to show in interviews because it leads to better answers on the job&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="details_right" id="video_container"&gt;
          video
      &lt;/div&gt;   
  &lt;/div&gt;
  </code></pre>
  
  <p>And the jQuery:</p>
  
  <pre><code>$('#johnk').click( function(){
      $('#video_container').html('&lt;iframe width="425" height="349" src="http://www.youtube.com/embed/bMvRdr-mUOU?rel=0" frameborder="0" allowfullscreen &lt;/iframe&gt;');
  })
  </code></pre>
  
  <p>To reduce hand coding a .click() for each video I am considering creating an associative array that has the ids-> embed code. Is there a better way to accomplish the same functionality more efficiently?</p>
  
  <p>Thanks in advance for any insights!</p>