Video Display Sizes

July 9, 2017 Michael Kennon

So you’ve got a video or two to show on your website, but how do you control how big the display is going to be?

Some of that is determined by the video’s original display size, but you can also override the default size with some settings for the display. For example the video below has been set to display at a width=”1280″ and height=”640″ when your browser is using the full size of your computer monitor. It does resize itself when not using the full size of your computer monitor proportionally.

In this case the code is typed in the post editor in the Text mode as shown below, the link to the video file location has been blurred as a security measure as it is located on a separate website.

Click to view image above larger

video original source: Vimeo

How can you determine what the height and width settings should be and keep things proportional?

In WordPress depending upon how you insert the video into your post or page things are usually automatically set, but if you need to look-up the settings use the table below.

Standard HD Cinema Film Cinemascope
Aspect ratio
4:3
Aspect ratio
6:9
Aspect ratio
1.85:1
Aspect ratio
2.35:1
Width Height Width Height Width Height Width Height
240 180 240 135 240 130 240 102
320 240 320 180 320 173 320 136
480 360 480 270 480 259 480 205
640 480 640 360 640 346 640 273
720 540 720 405 720 389 720 307
800 600 800 450 800 432 800 341
1024 768 1024 576 1024 554 1024 436
1152 864 1152 648 1152 623 1152 491
1280 960 1280 720 1280 692 1280 545
1360 1020 1360 765 1360 735 1360 579
1366 1025 1366 768 1366 738 1366 582
1440 1080 1440 810 1440 778 1440 614
1536 1152 1536 864 1536 830 1536 654
1600 1200 1600 900 1600 865 1600 682
1680 1260 1680 945 1680 908 1680 716
1920 1440 1920 1080 1920 1038 1920 818

Please remember that the larger your display size the higher the resolution should be of the video and that means the larger the file size is going to be. The larger your video file is then more bandwidth is required to play the video for your site visitor without buffering. Larger video file sizes can also use more of your hosting service’s server side resources, but you can most times use a third party service such as YouTube or Vimeo to host the video and just call it up from there to include in your post or page. This does not always work very well and in certain instances the video file must be on your site in the Media Library. Using a third party services also have their own limitations and you should research those as best you can.