Strictly speaking, this isn’t a HTML question. But this popped up when I was learning how to embed a video into a webpage. I assume this question may be relavent when we want to embed videos on webpages with a specified display size that also keeps the correct width/height ratio. Please tell me if it’s inappropriate and I’ll delete it.
I was trying to do the active learning practice from the HTML Multimedia and Embedding- video and audio content tutorial. I created a simple webpage and added the <video>. It works fine but I have a question about the size (not the file size, but the display size).
The video I embedded was recorded by my phone. So the shape of the video was a standing rectangle (same as the shape of a phone). When I didn’t include the height and width property, the video was embedded correctly with that shape.
When I looked at the height and width provided in the content details of the video file (as in the image), it was obvious the shape was unlike a phone (its width is larger than its height). And when I added the width and height property to <video> using the information provided by the content details of the video file, the video didn’t fit the player, and the blank horizontal space was filled with a black background.
So I am confused. Where can we get the actual size of the video file when we want to embed them, and what does the screen height and width provided in the video (mp4) content details actually refer to.
So, when you embed a video in a page with no height and width attributes set, it just uses the intrinsic size of the video, e.g. the size of your mobile phone.
When you set a specific size using width/height, it makes the video small enough that it will fit into that width/height while maintaining the video’s intrinsic aspect ratio. And space not taken up by the video is filled in with a black box (this is called “letterboxing”, and you can override this using the CSS object-fit property if you feel you need to.)
To find out the video’s intrinsic size, you need to use an information app of some kind (e.g. on macOS, you can click on and do Cmd + I to open the information window that gives you such details. I’m assuming the screenshot you are showing here is equivalent on Windows? That’s the intrinsic video size.)
Then if you don’t want to show the video at its actual intrinsic size, but don’t want to letterbox the video, you need to do a calculation to make sure you use a width/height with the same aspect ratio as the video’s intrinsic width/height.
Actually I was asking why the screenshot I show didn’t reflect the intrinsic size of the video. I just realized the width and height shown by my computer is exactly the opposite for some reason. It was correct on my phone (Android) and on google photos, but when downloaded on to my computer (Windows), the width and height just flipped. Anyways, doesn’t look like a web problem, so I’ll delete this post tomorrow.
