title: Resizing a MediaElementjs video that is loaded dynamically
body: <p>So I have a video, that I load into the page with jQuery's .load(). Here's the website where you can see the problem in the 'vidéos' section : <a href="http://guillaumep.com/" rel="nofollow">http://guillaumep.com/</a>.</p>
  
  <p>Here's the video tag I have to use :</p>
  
  <pre><code>&lt;video&gt;&lt;source src="URLTOVIDEO.mp4" type="video/mp4" /&gt;
  </code></pre>
  
  <p>Here's the code that generates the video HTML right after it's been loaded in my <code>#contentFrame</code> :</p>
  
  <pre><code>$('video').wrap('&lt;div class="videowrapper"&gt;')
  
  .attr({ 'style': 'width: 100%; height: 100%;' })
  .mediaelementplayer({ success: function (player) { 
      correctVideoSize($(player).parent(4).eq(0)); }
  });
  </code></pre>
  
  <p>Then I have code that actually resizes the video player according to the window's shape, so that the video always shows at it's maximum size while never overflowing the window :</p>
  
  <pre><code>function correctVideoSize(videoContainer) {
      var videoContainerHeight = $(window).height() - 100;
      var videoContainerWidth = $(window).width() * 0.92;
      var videoContainerRatio = videoContainerWidth / videoContainerHeight;
      var videoRatio = videoContainer.width() / videoContainer.height();
      console.log('videoRatio : ' + videoRatio);
      console.log('videoContainerRatio : ' + videoContainerRatio);
  
      if (!isNaN(videoRatio) &amp;&amp; videoContainerRatio &lt; videoRatio)
      {
          videoContainer.height(videoContainerWidth / videoRatio).width(videoContainerWidth);
      }
      else if (!isNaN(videoRatio))
      {
          videoContainer.height(videoContainerHeight).width(videoContainerHeight * videoRatio);
      }
  
      return videoContainer;
  }
  </code></pre>
  
  <p>Resizing images that way absolutely works, as you can see there : <a href="http://guillaumep.com" rel="nofollow">http://guillaumep.com</a>, but for videos I don't understand how, when, what and where I'm supposed to resize. You can see the problem here : <a href="http://guillaumep.com/2012/10/22/test-video/" rel="nofollow">http://guillaumep.com/2012/10/22/test-video/</a>.</p>
  
  <p>I tried a lot of différent things, and got the video to correctly resize on the $(window).resize() event, but I guess only because MediaElementJs already hooks into this event and does some magic.</p>
  
  <p>I'm really lost here, thanks for any help !</p>