Embed
This page contains examples on usage of the Embed component.
Embeddable YouTube
The below examples are for the YouTube embeddable.
Default behaviour
- YouTube consent overlay banner (configured in the Context Aware Configuration: Pages) asks for permission to accept cookies from YouTube, before playing a video.
- Thumbnail from YouTube (stored in the path chosen in the Context Aware Configuration: Pages) and no additional layout configuration.
- Default size: width of 100% and height of 390px.
Responsive layout
- Thumbnail from DAM
- Responsive layout in component dialog set to aspect ratio of 25% in the first embed component and 100% in the second
- Component positioned and resized differently in the different devices/breakpoints
These examples showcase the difference between the Responsive Layout property of the Embed component and the Responsive Grid Layout inside the container. Observe the blank spaces in the second embed component to meet the aspect ratio.
Fixed layout
- Fixed layout with dimensions 600x400.
- The thumbnail image this video is pointing to has been removed from the DAM. When the image is not found, the default one (defined in the Context Aware Configuration: Pages) is shown.
This example showcases how a fixed layout works along with responsive grid.
Container and background styles
Container with full page width and primary light background
Container with background full page width and primary dark background