Video Thumbnail
A video thumbnail that can be used to help lazy load a video, or show a video in carousel navigation.
<div class="FlexEmbed">
<div class="FlexEmbed-ratio FlexEmbed-ratio--16by9"></div>
<div
>
<img class="FlexEmbed-content"
src="/images/prototypes/tcs/GeneratorFamily.jpg"
alt="A video thumbnail showing a set of generators in the driveway of a house">
<div class="FlexEmbed-content FlexEmbed-content--overlay">
<svg width="26" height="26" viewBox="0 0 512 512" aria-hidden="true" class="FlexEmbed-icon ">
<path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z"/>
</svg>
</div>
</div>
</div>
Video thumbnails can be made interactive by wrapping the icon content in a link, adding the FlexEmbed-icon--interactive class to icons, and including u-hiddenVisually screen reader text.
<div class="FlexEmbed">
<div class="FlexEmbed-ratio FlexEmbed-ratio--16by9"></div>
<a
href="#"
>
<img class="FlexEmbed-content"
src="/images/prototypes/tcs/GeneratorFamily.jpg"
alt="A video thumbnail showing a set of generators in the driveway of a house">
<div class="FlexEmbed-content FlexEmbed-content--overlay">
<svg width="26" height="26" viewBox="0 0 512 512" aria-hidden="true" class="FlexEmbed-icon FlexEmbed-icon--interactive">
<path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z"/>
</svg>
<span class="u-hiddenVisually">Play Video</span>
</div>
</a>
</div>
The inner FlexEmbed-content of a thumbnail can also be embedded into other FlexEmbeds to build more complex experiences.