Seamlessly adaptive HTML5 video playback

Question

Seamlessly adaptive HTML5 video playback

Has anyone figured out how to make an HTML5 video in an absolutely positioned <video> element resize to fit the window width and height without ever getting cropped? Many solutions I've come across rely on using the <iframe> tag, which is not an option for me, or only adjust based on width (something I can already do).

Essentially, I want the video to be as large as possible while also ensuring it doesn't get cut off if the window size changes - even in IE9. (Just to clarify: The video needs to keep its original aspect ratio, so black bars are acceptable.)

Here's what I've attempted so far.

/*CSS*/

#player-overlay {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000        
    z-index:999;
}

<!--HTML-->

<div id="player-overlay">
  <video width="100%" video="100%" style="width:100%, height:100%">
    <source src="../static/video/10s.mp4" />
    <source src="../static/video/10s.webm" type='video/webm; codecs="vp8, vorbis"' />
    <source src="../static/video/10s.ogv" type='video/ogg; codecs="theora, vorbis"' />
  </video>    
</div>

It looks like I might have to resort to writing a JavaScript solution instead.

javascript jquery html css html5-video

Answer 1

Answer №1

Applying width and max-height to the <video> element will ensure proper display:

<div id="player-overlay">
    <video>
        <source src="../static/video/10s.mp4" />
        <source src="../static/video/10s.webm" type='video/webm; codecs="vp8, vorbis"' />
        <source src="../static/video/10s.ogv" type='video/ogg; codecs="theora, vorbis"' />
    </video>    
</div>

video {
    width: 100%;
    max-height: 100%;
}

Explore this link for more insights.

Additionally, remember to include a semicolon after background-color. In positioning elements to fill the screen, consider using top, bottom, left, and right properties rather than height and width.

Answer 2

Applying width and max-height to the <video> element will ensure proper display:

<div id="player-overlay">
    <video>
        <source src="../static/video/10s.mp4" />
        <source src="../static/video/10s.webm" type='video/webm; codecs="vp8, vorbis"' />
        <source src="../static/video/10s.ogv" type='video/ogg; codecs="theora, vorbis"' />
    </video>    
</div>

video {
    width: 100%;
    max-height: 100%;
}

Explore this link for more insights.

Additionally, remember to include a semicolon after background-color. In positioning elements to fill the screen, consider using top, bottom, left, and right properties rather than height and width.

Answer 3

Answer №2

(Although this discussion is from a while back, I'm optimistic that my response will be beneficial to someone in need.)

It seems like you already had the correct solution at hand. The style="width:100%, height:100%" on your <video> tag is effective, but remember to use a semicolon instead of a comma. It's unnecessary to include the redundant width="100%" and height="100%" attributes.

The reason why width: 100%; height: 100% works (with a semicolon) is because even though the <video> element expands, the video itself maintains its aspect ratio, resulting in letterboxing or pillarboxing within the <video> container: .

An advantage of using height: 100% is that the video gets letterboxed precisely in the center, whereas with max-height: 100%, the video aligns to the top of the container.

Additionally, ensure that your <video> tag has display: block set. Otherwise, it defaults to display: inline, leaving white space at the bottom due to font descenders: There is a 4px gap below canvas/video/audio elements in HTML5.

As noted by @gilly3, don't forget to add a semicolon after background-color: #000. And obviously, remove display: none. =)

Here's the complete solution:

/*CSS*/

#player-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 999;
}

video {
  display: block;
  width: 100%;
  height: 100%;
}

<!--HTML-->

<div id="player-overlay">
  <video controls>
    <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
    <source src="http://techslides.com/demos/sample-videos/small.ogv"  type="video/ogg">
    <source src="http://techslides.com/demos/sample-videos/small.mp4"  type="video/mp4">
    <source src="http://techslides.com/demos/sample-videos/small.3gp"  type="video/3gp">
  </video>
</div>

View the code snippet in "full page" mode and resize your browser window to observe the letterboxing effect.

By the way, the original sources for your videos weren't working anymore, so I utilized sample videos found here: .

I hope this information proves helpful.

Answer 4

(Although this discussion is from a while back, I'm optimistic that my response will be beneficial to someone in need.)

It seems like you already had the correct solution at hand. The style="width:100%, height:100%" on your <video> tag is effective, but remember to use a semicolon instead of a comma. It's unnecessary to include the redundant width="100%" and height="100%" attributes.

The reason why width: 100%; height: 100% works (with a semicolon) is because even though the <video> element expands, the video itself maintains its aspect ratio, resulting in letterboxing or pillarboxing within the <video> container: .

An advantage of using height: 100% is that the video gets letterboxed precisely in the center, whereas with max-height: 100%, the video aligns to the top of the container.

Additionally, ensure that your <video> tag has display: block set. Otherwise, it defaults to display: inline, leaving white space at the bottom due to font descenders: There is a 4px gap below canvas/video/audio elements in HTML5.

As noted by @gilly3, don't forget to add a semicolon after background-color: #000. And obviously, remove display: none. =)

Here's the complete solution:

/*CSS*/

#player-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 999;
}

video {
  display: block;
  width: 100%;
  height: 100%;
}

<!--HTML-->

<div id="player-overlay">
  <video controls>
    <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
    <source src="http://techslides.com/demos/sample-videos/small.ogv"  type="video/ogg">
    <source src="http://techslides.com/demos/sample-videos/small.mp4"  type="video/mp4">
    <source src="http://techslides.com/demos/sample-videos/small.3gp"  type="video/3gp">
  </video>
</div>

View the code snippet in "full page" mode and resize your browser window to observe the letterboxing effect.

By the way, the original sources for your videos weren't working anymore, so I utilized sample videos found here: .

I hope this information proves helpful.

Answer 5

Answer №3

For a great solution, apply this CSS code- By using height: auto;, your container will be properly covered.

video {
  width: 100%;
  height: auto;
}

Answer 6

For a great solution, apply this CSS code- By using height: auto;, your container will be properly covered.

video {
  width: 100%;
  height: auto;
}

Answer 7

Answer №4

While searching for information on responsive videos, I unexpectedly discovered this helpful answer. I used a similar approach to create my own responsive video element.

If you're looking to gain a better understanding of the concept, check out this link: Height equals width Pure CSS

Your code implementation could resemble the following:

#player-overlay {
  position: relative;

  &:before {
    content:'';
    display: block;
    padding-top: 50%;  // A 2:1 ratio is achieved with 50%. Check the provided link for more details on ratios.
  }
}

video {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

To adjust the ratio, simply modify the padding-top value in the before pseudo-element.

Answer 8

While searching for information on responsive videos, I unexpectedly discovered this helpful answer. I used a similar approach to create my own responsive video element.

If you're looking to gain a better understanding of the concept, check out this link: Height equals width Pure CSS

Your code implementation could resemble the following:

#player-overlay {
  position: relative;

  &:before {
    content:'';
    display: block;
    padding-top: 50%;  // A 2:1 ratio is achieved with 50%. Check the provided link for more details on ratios.
  }
}

video {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

To adjust the ratio, simply modify the padding-top value in the before pseudo-element.

Seamlessly adaptive HTML5 video playback

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

A guide to finding the mean in Angular by utilizing JSON information

What is the process for adding a dot to the package.json file using the npm-pkg command?

Can Comet be implemented without utilizing PrototypeJs?

How can I confirm if a class is an instance of a function-defined class?

What is the best way to limit the length of text in a div if it surpasses a

Displaying Spinner and Component Simultaneously in React when State Changes with useEffect

Trouble initializing Google Maps in an Angular directive

Strange occurrences within the realm of javascript animations

Reset the jQuery star-rating plugin

Choosing HTML components using Selenium in the Whatsapp application

The Bootstrap Jumbotron section stubbornly stays above the footer

Certain javascript files have had illegal characters mistakenly added to them

The $resources headers have not been updated

Altering content using jQuery

Tips for managing state updates in React Redux

Executing a Node.js script using an absolute path

Converting a Class Component to a Functional Component: Step-by-Step Guide

I am experiencing difficulty with aligning my input boxes to the center in my React-Native

Aligning a sprite at the center of a div background

Execute a function with parameters when a button is clicked dynamically using PHP