Skip to main content
Logo

Video player layout options

This article describes the various layout options that are configurable in the Video web control. 

Responsive

The Contensis video player is set to a responsive layout by default. 

The video player width is set to 100% to fill its parent container and we use the aspect ratio option to determine the height of the video player. As HD video has become common place, we have set the aspect ratio to 16:9 widescreen to be the default to accommodate most video scenarios.

Aspect ratio options

Whilst 16:9 widescreen is the default aspect ratio we have also provided the following ratios in the dropdown:

16:10 standard monitor

If you are displaying screencasts on your website, 16:10 provides a common ratio used by screen recording software.

4:3 classic television

If you have some old footage, or a converted VHS/DVD that you are displaying on your site. The classic TV ratio would be ideal.

1:1 square

Do you have some quirky Vine or Instagram videos that you've archived you would like to playback on your site? Then use the 1:1 square ratio.

2.4:1 cinematic widescreen

Its common place to have HD video that has black bars on the top and bottom to give a cinematic feel to the footage. Using the 2.4:1 cinematic widescreen option will remove those bars, keeping your design and video nice and crisp.

Fixed dimensions

When you need a player to remain at a custom size to fit a particular design you can choose fixed dimensions:

Size presets or set a custom size

We've included a few common dimensions based on a 16:9 aspect ratio but you can also set your own dimensions by selecting Custom size in the drop down.

Stretching

The stretching option is important when using fixed dimensions. To ensure your video displays correctly we've set the video default to Uniform. An explanation of each of the stretching options follows:

Uniform

Will fit the video to the video player dimensions proportionally, maintaining the original aspect ratio of the video. Black bars may be displayed, but this best solution if you are not sure of the ratio of the source video.

Exact fit

Will fit the video to the video player dimensions without maintaining its aspect ratio, this can cause your video to be squished, but will prevent black bars from being displayed.

Fill

Will stretch and zoom the video to fill the player dimensions, while maintaining aspect ratio.

Be aware:
  • If the source video is smaller than the player dimensions the video may become pixelated
  • You may also find that important content is cut off from the edges of the video frame where the player zooms to match the ratio.

None

When stretching is set to none, the player will displays the video file at its actual size, black bars may be present if the video is smaller than the player dimensions.

Poster image

A poster image is displayed in the player window before a video is played. You may want to use a poster image to display a company logo placeholder or use an image to blend the video player into a design before a visitor initiates playback.

You can use the content selector to browse for an image in Contensis or provide a URL to an image.

Poster image sizing

Poster images sizing and position is handled the same way as video content. If the player is set to responsive then your poster image will be scaled to the same aspect ratio as your video content. If the player instance is set to fixed dimensions then the poster image will inherit the stretching option that has been chosen.

As a good rule of thumb, size your poster image to the same dimensions as your video source.

Things to be aware of

  • Poster images can not be used with a playlist.
  • You should apply the same consideration of file size and compression to poster images as you do to other images on the web.
  • As the video player can be opened in full screen make sure your poster image is of the same source dimensions and quality as your video.