Video embed
On this page
Usage
The video embed element shows a static preview of the video, and this allows the user to control what image is seen before the video is played. It also ensures that the video does not start playing automatically.
Thumbnails
For users that do not have advertising cookies enabled, the video embed element should display a standard cookie consent thumbnail. This thumbnail includes instructions to enable advertising cookies and a button that will trigger a cookie consent dialog window.
Check the Code subpage for information about attributes and events that will help you implement the cookie consent thumbnail and integrate it with the preferred cookie consent manager. View the Require Consent demo to see a standalone implementation of this functionality.
Writing Content
Character Count
An optional descriptor caption can be placed underneath the video embed element. The recommended maximum character count is listed below and includes spaces.
Element | Character count |
---|---|
Caption | 150 |
Responsive Design
The video’s width will dynamically adjust with its parent container. The video embed element dimensions should retain the same aspect ratio as the original video. The caption font size will also remain the same across all screen or container sizes.
Large Viewport Sizes
Small Viewport sizes
Best Practices
Play button position

Keep the play button centered horizontally and vertically.

Do not move the play button to another area of the video element.
Play button theme

A light theme play button should be used if the thumbnail image has a light color palette, and a dark theme play button should be used against dark thumbnails.

Do not use a dark theme play button over a thumbnail with mostly light colors, and vice versa.
Aspect Ratio

The video embed element should display a video using its original aspect ratio.

Do not change the aspect ratio of the video within the video embed element.
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.