This article describes the various layout options that are configurable in the Video web control.
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.
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.
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.
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:
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.
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.
Will stretch and zoom the video to fill the player dimensions, while maintaining aspect ratio.
- 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.
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.
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.