HTML5 video player frame width issue

Question

So, on my website there are going to be mulitple videos all with different content that has been submitted by users and uploaded to the site.

Some videos that users have uploaded have different frame widths and heights.

For example:

(Video 1) - Frame width: 1280.

(Video 2) - Frame width: 480. Frame height 360.

The problem is that when a video with a different frame height is used, the actual HTML5 video itself changes it's height. It get's smaller or larger, I do not want that, I want all videos to remain the same size regardless of the video frame height.

Like Youtubes, all of the videos are exactly the same width and height, I want it like thiers.

To give you guys more of an idea of what I mean, I've gave a link below to the html file: https://mega.nz/#!oMpwDQ7a!r5wO1GfG0c5Gj5dd5xE8pk1Udl5GxoaQ37pDwLAgcXk .

Note: I have tried almost everything, changed CSS code 1million times, tried 3rd party apps, nothing is giving me what I want.

Best regards, thanks.

Jem Jem · Accepted Answer · 2016-06-01T19:12:02

In order to have all videos be the same size, you will need to either stretch the video (typically bad, don't do this) or add bars to the top/bottom or sides to show the original video dimensions. With html5 video, all you need to do to achieve this is apply a width and height to the video tag.

<style type="text/css">
video{width: 500px;height:300px;position:relative;margin-top:-20px;}
video:hover{cursor:pointer}
</style>

Try this in your source file, it will cause all your videos to be the same size, and will simply add bars to the files to make them all take up the same space (note how it adds to the top/bottom on one, and the sides on the other).

Even youtube does this if you video file is of a different aspect ratio (you'll notice black bars on those youtube videos, ex: https://www.youtube.com/watch?v=2Or1Ui7yM7Q this video was shot on a square monitor, and is not widescreen aspect).

HTML5 video player frame width issue

1 Answers