The base video component uses Vimeo’s Player SDK embed options. It supports using vimeo data attributes or video data attributes. Video data attributes will be converted to an options object to configure the Vimeo Player in scripts.js.
Vimeo Example:
<div
id="vimeo-402741331"
data-vimeo-id="402741331"
data-vimeo-responsive="true"
data-vimeo-background="true"
data-vimeo-width="1800"
data-vimeo-height="700"
data-vimeo-transparent="false"></div>Video Example:
<div
id="video-402741331"
data-video-id="402741331"
data-video-responsive="true"
data-video-background="true"
data-video-width="1800"
data-video-height="700"
data-video-transparent="false"></div>One difference between the vimeo and video data attributes is that the video data
attributes can support adaptive video based on screen orientation. To swap the
video on screen orientation, include alternate video IDs by using data-video-portrait
and data-video-landscape. Use data-video-id as a fallback id.
data-video-id="1145674131"
data-video-portrait="1145674131"
data-video-landscape="1145674142"
<div class=" tcu-video">
<div id="vimeo-402741331" data-vimeo-id="402741331" data-vimeo-responsive="true" data-vimeo-background="true" data-vimeo-width="1800" data-vimeo-height="700">
</div>
<button aria-live="polite" class="_pause"><span aria-hidden="true">❚❚</span> Pause</button>
</div>