title: Adding you tube player (iFrame) in jQuery modal dialog
body: <p>I have some images in my <code>HTML</code> and _I need to play embedded you tube video videos on click of each image which should load/play in a <a href="http://jqueryui.com/dialog/#default" rel="nofollow noreferrer">jQuery UI dialog</a>. Basically like a <strong>pop up video player.</strong></p>
  
  <p>So here is what i have done to play/attach video with each image. I have three images and i have added the unique video id in my custom <code>data-attribute</code> which i taken from you tube.</p>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;div id="ImageBox"&gt;
   &lt;img src="img1.png" class="playVideo" alt="" id="image1" data-videoId="v6jg8g"/&gt;
   &lt;img src="img2.png" class="playVideo" alt="" id="image2" data-videoId="re84hj"/&gt;
   &lt;img src="img3.png" class="playVideo" alt="" id="image3" data-videoId="dhj3fk"/&gt;
  &lt;/div&gt;
  
  &lt;!-- HTML for jQuery modal dialog --&gt;
  &lt;div id="MyVideoPlayer"&gt;
      &lt;div&gt;
          &lt;strong id="videoTitle"&gt;title for video&lt;/strong&gt;
          &lt;img src="closeButton.png" id="Close" alt="Close" /&gt;
      &lt;/div&gt;
      &lt;iframe src="https://www.youtube.com/embed/MyVideoId?wmode=opaque&amp;autoplay=1&amp;autohide=1&amp;showinfo=0&amp;controls=2&amp;rel=0&amp;enablejsapi=1" id="Player" width="100%" height="100%"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>Note: I am using <code>iframe embed</code> method from <a href="https://developers.google.com/youtube/player_parameters#Manual_IFrame_Embeds" rel="nofollow noreferrer"><strong>you tube player
    API</strong></a>
    to embed videos.</p>
  </blockquote>
  
  <p>For JavaScript/jQuery section, I came up with two choices here.</p>
  
  <p><strong>1. Because i am working in a ASP.NET MVC 3 app, i can set the unique video id to <code>@ViewBag</code> in script and assign to <code>iFrame</code> like this...</strong></p>
  
  <pre><code>$('#ImagesBlock .playVideo').click(function(){
      var myId = $(this).attr('data-videoId');
      '@ViewBag.VideoId' = myId;
      $('#MyVideoPlayer').dialog(
          { width: 'auto' },
          { height: 'auto' },
          { draggable: false },
          { resizable: false },
          { closeOnEscape: false },
          { modal: true },
          { show: { effect: "fade", duration: 200} }
      });       
  });
  </code></pre>
  
  <p><strong>2. Assign the updated <code>iFrame</code> src with new video id each time dialog
      opens.</strong></p>
  
  <pre><code>$('#imagesBlock .playVideo').click(function(){
      var myId = $(this).attr('data-videoId');
  
      var src = 'https://www.youtube.com/embed/'+ myId +'?wmode=opaque&amp;autoplay=1&amp;autohide=1
          &amp;showinfo=0&amp;controls=2&amp;rel=0&amp;enablejsapi=1';
  
      $('#MyVideoPlayeriframe').attr('src', src);     
      $('#MyVideoPlayer').dialog(
          { width: 'auto' },
          { height: 'auto' },
          { draggable: false },
          { resizable: false },
          { closeOnEscape: false },
          { modal: true },
          { show: { effect: "fade", duration: 200} }
      });        
  });
  </code></pre>
  
  <p>Which one should I go with. I found some references though,</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/17804992/embedded-jwplayer-into-jquery-dialog">Embedded jwplayer into jQuery Dialog</a></li>
  <li><a href="https://stackoverflow.com/questions/15887106/how-to-get-embedded-video-into-modal-dialog">https://stackoverflow.com/questions/15887106/how-to-get-embedded-video-into-modal-dialog</a></li>
  <li><a href="http://plugins.jquery.com/jquery.mb.YTPlayer/" rel="nofollow noreferrer">jQuery mb.YTPlayer</a></li>
  </ul>
  
  <p>Is there any way i can make it little more simplified and re-usable in future. Please advise with your wise opinion.</p>