title: How can a Mediaelement.js video fill the containing box?
body: <p>I am trying to add Mediaelement to our html video playback. I came across an issue I haven't figured out how to handle and thought I'd better ask.</p>
  <p>In one place the video tag is inside a lightbox (Colorbox to be exact). Straight html5 video respects the size of the lighbox. It fills the available space and then fits the actual video frame inside this space leaving empty &quot;letter boxing&quot; where the aspect ratio of the video and the lightbox differ.</p>
  <p>Did that make sense? In other words it makes the video as large as it can be without clipping any part of it.</p>
  <p>I would like Mediaelement to do the same but it does something different. Mediaelement fills the width every time. This causes the video to be clipped whenever the lightbox is more widescreen than the video is. The video also enable scrolling to see the bottom part of the video and the controls section.</p>
  <p>I did try some basic css overrides, played with the width and height options. I also changed the option <strong>enableAutosize</strong> without seeing a difference. Looks like the size of all the dynamically added html is determined by Javascript.</p>
  <p>Is there a <em>supported</em> or <em>intended</em> way to get the result I am after without extending or hacking the Mediaelement javascript?</p>
  <p>I should probably add that video content is of varying dimensions and the lightbox is also dynamically sized.</p>
  <pre><code>$(&quot;a.cbox_group&quot;).colorbox({
    rel:'cbox_group',
    scalePhotos:true,
    transition:&quot;none&quot;,
    width:&quot;99%&quot;,
    height:&quot;99%&quot;,
    maxWidth:&quot;90%&quot;,
    maxHeight:&quot;100%&quot;,
  });
  
  
  $('video').mediaelementplayer({
    loop: true,
    enableAutosize: true,
    features: ['playpause','progress','current','duration','fullscreen'],
    alwaysShowControls: true,
    pauseOtherPlayers: true,
  });
  </code></pre>
  <p>Colorbox is set to take most of the browser window. It has a feature to adjust the size of the content to the &quot;box&quot; <strong>scalePhotos:true</strong>. This sets the right with and height and works great for images and the original video tag.</p>
  <p>If Mediaelement finds this, it will <em>do its own thing</em> and make the player 16:9 aspect and what looks to be 1:1 pixel scale for the contents.</p>
  <p>If I ensure that this is not set, I.E. that the video element is without size attributes, then Mediaelement will kick in with <strong>enableAutosize:true</strong> and fill the with and possibly causing vertical scrolling and controls being out of view.</p>
  <h2>Online &quot;testcase&quot;</h2>
  <p>I managed to extract some static html that illustrates the problem I have. A page with a link that open a colorbox popover with pretty much exactly the settings I use in the application. I set the mediaelement javascript on a 2s delay so that the raw video element can be observed before mediaelement takes over.</p>
  <p>What I'd like is to find some combination of settings that allow the same basic &quot;layout&quot; as the raw video tag (clip neither height nor width) but with mediaelement controls and automatic fallbacks and all the rest.</p>
  <p><a href="http://eimer.co/mediaelement/demo/colorbox.html" rel="nofollow noreferrer">Example test page</a></p>
  <p><a href="https://github.com/eimermusic/eimermusic.github.com/tree/master/mediaelement" rel="nofollow noreferrer">Source on Github</a></p>
  <p>Make the browser very widescreen to make it obvious.</p>