html5 video stretch?

[James_43]

Hi all,

I have a HTML video within a div that is 100% width of the page. I want the video fill the container and crop the height to fit. But so far I cannot get the video to expand at all!

I'm simply using:

.video { 
width:100%;
}

and

<div class="main-content">
<video class="video" autoplay loop">
  <source src="/wp-content/themes/StrongLinks/video.webm" type='video/webm'/>
  <source src="/wp-content/themes/StrongLinks/video.mp4" type='video/mp4'/>
</video>
</div>

Can someone explain why the video object isn't obeying the 100% width command?

[rproffitt]

I think it's been hurting heads for many years now. https://www.google.com/#q=html5+video+stretch finds you may have to find other video players or just bite the bullet and make the video exactly what you want in the first place.

[James_43]

So does that mean if I want a video to fill a div, that obviously changes in aspect ratio depending on the screen its viewed on... then I can't do that??

[rproffitt]

James, I supplied the search so you could see the priors. Check the latest HTML5 video standards. I read this:

Quote from the HTML5 spec for <video> tags:

Video content should be rendered inside the element's playback area such that the video content is shown centered in the playback area at the largest possible size that fits completely within it, with the video content's aspect ratio being preserved. Thus, if the aspect ratio of the playback area does not match the aspect ratio of the video, the video will be shown letterboxed or pillarboxed. Areas of the element's playback area that do not contain the video represent nothing.

[James_43]

I understand that a stretched video will cause letterboxing or pillarboxing. But them problem I am having is setting the width/height of the video element. For example, the CSS:

.video { 
    width: 100px;
    height: 200px;
}

does not cause letterboxing, instead the element only obeys the width constraint. My question is why doesn't the video element also obey the height constraint and display with letterboxing?

[James_43]

Solved. Adding position: fixed; to my CSS allows the video element to follow the constraints.