Use and placement

A video window may be used in three different contexts: in the main image of a page, in a video slider and in a news block. We encourage using videos on the website, but they should harmonize with other content on the page in question. In other words there should not be too much video content on the page. If multiple videos are to be published on the same page, we recommend using a video slider to gather all of the video content.

We recommend using a video slider to display multiple videos. This type of block allows users to browse among published videos. See the image below:

 

To use video elements, they should be uploaded in the ImageVault service first, and then published on the website. This means that videos that depend on links from video services such as YouTube and Vimeo should be avoided.

 

Appearance of video windows

Video in the main image

A video may be placed in to space for the main image of a page. Videos in these spaces should be adjusted to the proportion 2:1, since this is the size used for display.

 

The maximum boundary for a video window is 1440px. The window is responsive and scales according to the screen resolution at which it is displayed.

If the video is set to autoplay, there must be a button that the user can use to turn on the sound. This button is located in the lower right corner of the video. The button has two versions: one to turn on the sound and one to turn off the sound.


Icon to turn on the sound.


Icon to turn off the sound.

 

Video in video sliders

Videos can be displayed in the video slider block type. Most videos can be gathered and structured in a horizontal stream in these spaces. 

 

A specific button is used to start a video. The button is designed like a classic “play” button, and is placed at the center of the video window.


Color: White
Hex: FFFFFF

 

Clicking the button activates an animation where the video gradually emerges in the video window until the window is filled by the video (see the illustration below). Once the animation is completed, the video begins to play.

 

An X icon is used to shut down a video that is playing. The X icon is located in the top right corner of the video window.


Color: White
Hex: FFFFFF

 

Clicking on the X icon triggers an animation that gradually diminishes the video in the video window.

 

Arrow icons are used to browse between videos in the video slider. They are located at the bottom left and right corners of the block. When a user moves the mouse cursor over the arrow, this activates an animation that extends the arrow. The arrows come in two different colors, see below:


Color: G5
Hex: 204440

 


Color: White
Hex: FFFFFF

 

Video in news blocks

Video elements can also be displayed in news blocks. When video is used in these blocks, we recommend having the video start automatically and loop. We further recommend against showing any buttons or controls in these videos.