Video

Video block

Design style guide: https://assets.aad.org/html/Components/imageBlocks.html

This component accepts Youtube, Vimeo and Wistia videos. You need to enter both title and description. Use color conservatively, as you don't want the visual focus to be the frame, but rather the video itself.

Examples:

https://www.aad.org/diseases/eczema/child-difference-psoriasis

Media carousel


Media carousel uses the video block component: It chains a group of blocks into a carousel. The interaction is not automated but relies on the user to click on the arrows on both sides of the image. The perfect use case for this component would be for example, a situation where the topic keeps changing from month to month but the older posts also need to live on the page. Or if the topics that are further down the carousel, are something that don't necessarily demand the user's immediate attention, but need to be available on the page.

Example: https://www.aad.org/public/diseases/acne/skin-care/tips


Do not use this component expecting the users to always click through the carousel: If all videos are important to be visible and readily available, do not use this component: Simply use the video blocks without the carousel or if you have a large collection, the video gallery component.


Video gallery

https://assets.aad.org/Widgets/VideoGallery/videoGallery.html

This component also accepts Youtube, Vimeo and Wistia videos. As the videos do not have captions, make sure that the thumbnail for your video is descriptive. If not, please create the thumbnail.

Video image ratio for desktop videos is the standard: 16:9

For accessibility, please make sure that the video includes a transcript.

Contentful instructions for entering a video gallery:

Please fill in any special instructions on how to enter a video gallery into Contentful.

Entering video as an asset

 You can also simply enter a video as an asset on the page. Simply upload the video into Contentful and insert it as an asset.