Important information:

Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Video

Videos help tell a story, clarify complex messages that are difficult to express with words, and simply express a brand's visual language.

last modified: 01/01/1601 01:00:00

Lazy load

Lazy load should be added on all images, background images and videos except on the first section of the page as they should be directly loaded and visible.

Lazy load (all methods) and jsrs-resizerContainer/jsrs-resizerPart cannot be used together

Not inside, nor around the image.
Because equalizer is not triggered after image is loaded.

Accessibility

Enable the video element's native controls by default to allow the user to control the video.

<video>

The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button. If this is not included, the first frame of the video will be used instead.

Embed a video from YouTube, Vimeo or other

Flex Video lets browsers automatically scale video objects in your webpages. If you're embedding a video from YouTube, Vimeo, or another site that uses iframe, embed or object elements, you can wrap your video in div.flex-video to create an intrinsic ratio that will properly scale your video on any device.

Accessibility

Add title attribute with a description of the video content.