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

Turn off hover effect using solely CSS

The Yii yiiactiveform function remains undefined when clientValidation is disabled

Discover how to generate nested dynamic routes in NextJS by linking to MongoDB data using the getStaticProps and getStaticPaths functions

Implementing asynchronous code when updating state using React hooks

Transmitting a sequence of JSON information from php to JavaScript,

What causes the `d-none` class to toggle on and off repeatedly when the distance between two div elements is less than 10 during window resizing?

Easy task tracker in Vue.js

Is utilizing pjax the most effective method for achieving a seamless navigation experience?

Is there a regular expression that can identify whether a string is included in a numbered list?

Adjust the alignment of cells within a table

Exploring Image Access with Rails and jQuery

Create a dropdown menu using a PDO query to populate the selectable options

Generating instances using TypeScript generics

Passport.js: Navigating Users in the Right

Locate components within JQLite

Selectize Fails to Populate Options Using Ajax

Issues with Javascript code syntax

When a user clicks on a button, AJAX and jQuery work together to initiate a setInterval function that continually

Implement consistent styling across several elements within a component

Harness the power of a NUXT component on a different website