Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
A couple of important attributes to include in your video tag are the width and height attributes. If you look at this demo page I have here, the first line of examples is what happens when you don't include a width and height. With the very first one, we're not preloading the video and we haven't provided a poster image, so the browser has no information to base the video size on and it picks an arbitrary size. I've added a gray border to all the videos. So you can see the actual space provided for it. In the video to the right, we're preloading the video, so the browser sets the video area to the exact size of the video. In the last video on that line, we've provided a poster image and the browser is sizing the video area to the exact size of the poster image.
In the next line, we've set a width and height, but it's not the same dimensions of the video. It's too tall for the aspect ratio. In the second video, the browser is adding space above and below the video. Also notice there is a letterbox so that the video can play in the space without being stretched. In the third video we provided a poster image and Firefox is stretching the poster to fill the space. If we look at another browser, and I'll just go over to Safari, we can see that it doesn't stretch the poster like Firefox does.
So that's a specific issue for Firefox. In the third line, we have the same thing, except the video area is too wide for the video. So the browser is adding space to the size of it, also known as a pillarbox. Finally, in our last line, we have the correct width and height and everything looks as expected. Finally, in the last line we have the correct width and height and everything looks as expected. So the goal is to get the video area the same width and height as the video itself. In addition to avoiding extra space around the video, it keeps the browser from having to do extra processing to scale the video up and down.
But sometimes you can't know the video size ahead of time, so in that case it might be best putting a black background on the video tag, like I've done in this last example, so that when you play the video it's not floating in space. (Music playing) So really quick let's go to our code and add the width and height to our video tag. So if you're following along we're now in the 2-07 folder of the exercise files and I'm going to add our width and height just right after the video tag name. I know my video has a width of 480 pixels and a height of 300 pixels. And I can save that.
If we go back to Firefox and go to our podcast page, reload it, and that's how you do it and is pretty easy. It doesn't change much in the case of the podcast since the browser was already sizing the frame based on the preloaded video, but we're reinforcing the width and height in case we ever don't preload it or don't have a poster. All right, now audio on the other hand has no width and height attributes. So if you add them, they won't do anything. However, you can still resize the audio player using CSS and I actually want our audio player to be of the same width as our video player.
So I'm going to go and do that. Go back to our code. Normally it would be best to do this in a separate style sheet. For the sake of this example though, I'm just going to do an in-line style and I'm going to set our width to 480 pixels, the same size as our video in our video player. Okay, so now if we save that, we'll go back to our browser and reload it, we should see that now our audio player has the same width as our video. Okay, so that's width and height for video and audio.
For video you can use the width and height attributes of the video tag; for audio you have to use styles if you want to change anything. For video I'd recommend using width and height every time so that the browser can know how big the video frame should be ahead of time.
There are currently no FAQs about HTML5: Video and Audio in Depth.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.