title: Auto re-size embedded video streams within DIVs
body: <p>I have a pretty simple application that displays four video streams in a quadrant.  The user is able to double click each video to activate full screen mode, and then again to revert back to the quadrant.  This all works great.  </p>
  
  <p>The problem I am encountering is determining the proper placement/size of the embedded objects within my DIVs.  Ideally I would like the videos to fully occupy each of the DIVs regardless of how the user may re-size their browser window.</p>
  
  <p>My CSS looks like this:</p>
  
  <pre><code>.tl {
      position: absolute;
      top: 0;
      left: 0;
      right: 50%;
      bottom: 50%;
      background: white;
  }
  .tr {
      position: absolute;
      top: 0;
      left: 50%;
      right: 0;
      bottom: 50%;
      background: white;
   }
  .bl {
      position: absolute;
      top: 50%;
      left: 0;
      right: 50%;
      bottom: 0;
      background: white;
  }
  .br {
      position: absolute;
      top: 50%;
      left: 50%;
      right: 0;
      bottom: 0;
      background: white;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class='tr' id='vlc1'&gt;&lt;/div&gt;
  &lt;div class='tl' id='vlc2'&gt;&lt;/div&gt;
  &lt;div class='bl' id='vlc3'&gt;&lt;/div&gt;
  &lt;div class='br' id='vlc4'&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And my javascript:</p>
  
  <pre><code>function play(instance, uri) {
      VLCobject.getInstance(instance).play(uri);
  }
  
  var player = null;
  $(document).ready(function() {
      var mydiv = document.getElementById("tr");
      player = VLCobject.embedPlayer('vlc1', 400, 300, true);
      player.play("http://URL");
      player = VLCobject.embedPlayer('vlc2', 400, 300, true);
      player.play("http://URL");
      player = VLCobject.embedPlayer('vlc3', 400, 300, true);
      player.play("http://URL");
      player = VLCobject.embedPlayer('vlc4', 400, 300, true);
      player.play("http://URL");
  });
  </code></pre>
  
  <p>I've created a jsfiddle of this here:  <a href="http://jsfiddle.net/AD4Vp/" rel="nofollow">http://jsfiddle.net/AD4Vp/</a></p>
  
  <p>I think that perhaps I need to dynamically alter the size of the embedded videos?  I understand that I am defining video sizes here (400,300) but the videos still are all left oriented in each div and I am not sure how I can determine what the 'optimal' initial size should be.</p>
  
  <p>Any suggestions as to the best way to approach this would be appreciated.</p>
  
  <p>Thank you.</p>