video
The video element serves the purpose of embedding video content within documents.
It can be used with or without a caption.
The optional available settings are:
- playback rate
- download
- picture-in-picture
Due to the same-origin policy, certain browsers may open the video download in a new tab instead of initiating an automatic download. Users must ensure that the download starts properly by checking the new tab for the file or by modifying the aforementioned policy.
To provide a seamless experience, users are encouraged to upload their own subtitle tracks. Unfortunately, due to browser restrictions, we are unable to display subtitles within the player. This is essential for deaf users to follow along. More informations can be found here.
table of content
component variations
Default video
/
<div class="m-video -primary">
<video
data-sources='[{"src":"https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.mp4","type":"mp4"},{"src":"https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.webm","type":"webm"},{"src":"https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.ogv","type":"ogv"}]'
>
<track src="/#" kind="captions" />
</video>
<div class="m-video__controls">
<button
type="button"
class="a-button a-button--integrated -without-label m-video__play-button -show"
aria-label="play button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-play"></i>
</button>
<button
type="button"
class="a-button a-button--integrated -without-label m-video__pause-button"
aria-label="pause button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-pause"></i>
</button>
<div class="a-timeline m-video__timeline">
<div class="a-timeline__time">
<label for="timeline-id" class="a-timeline__current"></label>
<span>/</span>
<label for="timeline-id" class="a-timeline__duration"></label>
</div>
<div class="a-timeline__range">
<input
tabindex="0"
id="timeline-id"
type="range"
min="0"
max="0"
aria-valuemin="0"
aria-valuemax="0"
aria-valuenow="0"
aria-label="video time scrubber"
value="0"
/>
</div>
</div>
<div class="m-video__volume-controllers">
<button
type="button"
class="a-button a-button--integrated -without-label m-video__volume-high-button -show"
aria-label="volume high button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-volume-high"></i>
</button>
<button
type="button"
class="a-button a-button--integrated -without-label m-video__volume-disabled-button"
aria-label="volume disabled button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-volume-disabled"></i>
</button>
<div
class="a-slider a-slider--vertical m-video__volume-slider -floating-shadow-s -primary"
>
<input
tabindex="0"
type="range"
min="0"
max="100"
step="any"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="50"
aria-orientation="vertical"
aria-label="volume"
aria-description="vertical volume slider"
value="50"
/>
</div>
</div>
<div
class="a-link a-link--button-integrated -icon m-video__transcript-button"
>
<a
aria-label="link to transscript of the video file"
href="/#"
target="_self"
>
<span><i class="a-icon boschicon-bosch-ic-transscript"></i></span>
</a>
</div>
<button
type="button"
class="a-button a-button--integrated -without-label m-video__fullscreen-button"
aria-label="fullscreen button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-fullscreen"></i>
</button>
<button
type="button"
class="a-button a-button--integrated -without-label m-video__subtitles-button"
aria-label="subtitles button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-subtitles"></i>
</button>
<button
type="button"
class="a-button a-button--integrated -without-label m-video__subtitles-off-button -show"
aria-label="subtitles off button"
>
<i
class="a-icon a-button__icon boschicon-bosch-ic-subtitles-off-light"
></i>
</button>
<div class="m-video__settings-controllers">
<button
type="button"
class="a-button a-button--integrated -without-label m-video__settings-controllers-button"
aria-label="settings button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-settings"></i>
</button>
<div class="m-video__settings-flyout -floating-shadow-s -primary">
<button
type="button"
class="a-button a-button--integrated m-video__download-button"
>
<i class="a-icon a-button__icon ui-ic-right"></i>
<span class="a-button__label">Download</span>
</button>
<button
type="button"
class="a-button a-button--integrated m-video__playback-rate-button"
>
<i class="a-icon a-button__icon ui-ic-right"></i>
<span class="a-button__label">Playback speed</span>
</button>
<button
type="button"
class="a-button a-button--integrated m-video__picture-in-picture-button"
>
<i class="a-icon a-button__icon ui-ic-right"></i>
<span class="a-button__label">Picture in Picture</span>
</button>
</div>
<ol
class="m-video__options m-video__download-options -floating-shadow-s -primary"
>
<li>
<button
type="button"
class="a-button a-button--integrated m-video__download-go-back-button"
>
<i class="a-icon a-button__icon ui-ic-left"></i>
<span class="a-button__label">Go Back</span>
</button>
</li>
<li>
<div
class="a-link a-link--integrated -icon m-audio__setting m-video__download-link"
>
<a
data-title="Sintel"
aria-label="Sintel"
href="https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.mp4"
download=""
>
<span>Sintel.mp4</span>
<span>
<i
class="a-icon boschicon-bosch-ic-download"
title="download"
></i>
</span>
</a>
</div>
</li>
<li>
<div
class="a-link a-link--integrated -icon m-audio__setting m-video__download-link"
>
<a
data-title="Sintel"
aria-label="Sintel"
href="https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.webm"
download=""
>
<span>Sintel.webm</span>
<span>
<i
class="a-icon boschicon-bosch-ic-download"
title="download"
></i>
</span>
</a>
</div>
</li>
<li>
<div
class="a-link a-link--integrated -icon m-audio__setting m-video__download-link"
>
<a
data-title="Sintel"
aria-label="Sintel"
href="https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.ogv"
download=""
>
<span>Sintel.ogv</span>
<span>
<i
class="a-icon boschicon-bosch-ic-download"
title="download"
></i>
</span>
</a>
</div>
</li>
</ol>
<ol
class="m-video__options m-video__playback-rate-options -floating-shadow-s -primary"
>
<li>
<button
type="button"
class="a-button a-button--integrated m-video__playback-rate-go-back-button"
>
<i class="a-icon a-button__icon ui-ic-left"></i>
<span class="a-button__label">Options</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="0.25"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">0.25</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="0.5"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">0.5</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="0.75"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">0.75</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="1"
>
<span class="m-video__playback-rate-checkmark active-rate">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">Normal</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="1.25"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">1.25</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="1.5"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">1.5</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="1.75"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">1.7</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="2"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">2</span>
</button>
</li>
</ol>
</div>
</div>
</div>Video with playback setting only
/
<div class="m-video -primary">
<video
controlsList="nodownload"
disablepictureinpicture=""
data-sources='[{"src":"https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.mp4","type":"mp4"},{"src":"https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.webm","type":"webm"},{"src":"https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.ogv","type":"ogv"}]'
>
<track src="/#" kind="captions" />
</video>
<div class="m-video__controls">
<button
type="button"
class="a-button a-button--integrated -without-label m-video__play-button -show"
aria-label="play button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-play"></i>
</button>
<button
type="button"
class="a-button a-button--integrated -without-label m-video__pause-button"
aria-label="pause button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-pause"></i>
</button>
<div class="a-timeline m-video__timeline">
<div class="a-timeline__time">
<label for="timeline-id-2" class="a-timeline__current"></label>
<span>/</span>
<label for="timeline-id-2" class="a-timeline__duration"></label>
</div>
<div class="a-timeline__range">
<input
tabindex="0"
id="timeline-id-2"
type="range"
min="0"
max="0"
aria-valuemin="0"
aria-valuemax="0"
aria-valuenow="0"
aria-label="video time scrubber"
value="0"
/>
</div>
</div>
<div class="m-video__volume-controllers">
<button
type="button"
class="a-button a-button--integrated -without-label m-video__volume-high-button -show"
aria-label="volume high button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-volume-high"></i>
</button>
<button
type="button"
class="a-button a-button--integrated -without-label m-video__volume-disabled-button"
aria-label="volume disabled button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-volume-disabled"></i>
</button>
<div
class="a-slider a-slider--vertical m-video__volume-slider -floating-shadow-s -primary"
>
<input
tabindex="0"
type="range"
min="0"
max="100"
step="any"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="50"
aria-orientation="vertical"
aria-label="volume"
aria-description="vertical volume slider"
value="50"
/>
</div>
</div>
<div
class="a-link a-link--button-integrated -icon m-video__transcript-button"
>
<a
aria-label="link to transscript of the video file"
href="/#"
target="_self"
>
<span><i class="a-icon boschicon-bosch-ic-transscript"></i></span>
</a>
</div>
<button
type="button"
class="a-button a-button--integrated -without-label m-video__fullscreen-button"
aria-label="fullscreen button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-fullscreen"></i>
</button>
<button
type="button"
class="a-button a-button--integrated -without-label m-video__subtitles-button"
aria-label="subtitles button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-subtitles"></i>
</button>
<button
type="button"
class="a-button a-button--integrated -without-label m-video__subtitles-off-button -show"
aria-label="subtitles off button"
>
<i
class="a-icon a-button__icon boschicon-bosch-ic-subtitles-off-light"
></i>
</button>
<div class="m-video__settings-controllers">
<button
type="button"
class="a-button a-button--integrated -without-label m-video__settings-controllers-button"
aria-label="settings button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-settings"></i>
</button>
<div class="m-video__settings-flyout -floating-shadow-s -primary">
<button
type="button"
class="a-button a-button--integrated m-video__playback-rate-button"
>
<i class="a-icon a-button__icon ui-ic-right"></i>
<span class="a-button__label">Playback speed</span>
</button>
</div>
<ol
class="m-video__options m-video__download-options -floating-shadow-s -primary"
>
<li>
<button
type="button"
class="a-button a-button--integrated m-video__download-go-back-button"
>
<i class="a-icon a-button__icon ui-ic-left"></i>
<span class="a-button__label">Go Back</span>
</button>
</li>
<li>
<div
class="a-link a-link--integrated -icon m-audio__setting m-video__download-link"
>
<a
data-title="Sintel"
aria-label="Sintel"
href="https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.mp4"
download=""
>
<span>Sintel.mp4</span>
<span>
<i
class="a-icon boschicon-bosch-ic-download"
title="download"
></i>
</span>
</a>
</div>
</li>
<li>
<div
class="a-link a-link--integrated -icon m-audio__setting m-video__download-link"
>
<a
data-title="Sintel"
aria-label="Sintel"
href="https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.webm"
download=""
>
<span>Sintel.webm</span>
<span>
<i
class="a-icon boschicon-bosch-ic-download"
title="download"
></i>
</span>
</a>
</div>
</li>
<li>
<div
class="a-link a-link--integrated -icon m-audio__setting m-video__download-link"
>
<a
data-title="Sintel"
aria-label="Sintel"
href="https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.ogv"
download=""
>
<span>Sintel.ogv</span>
<span>
<i
class="a-icon boschicon-bosch-ic-download"
title="download"
></i>
</span>
</a>
</div>
</li>
</ol>
<ol
class="m-video__options m-video__playback-rate-options -floating-shadow-s -primary"
>
<li>
<button
type="button"
class="a-button a-button--integrated m-video__playback-rate-go-back-button"
>
<i class="a-icon a-button__icon ui-ic-left"></i>
<span class="a-button__label">Options</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="0.25"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">0.25</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="0.5"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">0.5</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="0.75"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">0.75</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="1"
>
<span class="m-video__playback-rate-checkmark active-rate">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">Normal</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="1.25"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">1.25</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="1.5"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">1.5</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="1.75"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">1.7</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="2"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">2</span>
</button>
</li>
</ol>
</div>
</div>
</div>Video with download setting only
/
<div class="m-video -primary">
<video
controlsList="noplaybackrate"
disablepictureinpicture=""
data-sources='[{"src":"https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.mp4","type":"mp4"},{"src":"https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.webm","type":"webm"},{"src":"https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.ogv","type":"ogv"}]'
>
<track src="/#" kind="captions" />
</video>
<div class="m-video__controls">
<button
type="button"
class="a-button a-button--integrated -without-label m-video__play-button -show"
aria-label="play button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-play"></i>
</button>
<button
type="button"
class="a-button a-button--integrated -without-label m-video__pause-button"
aria-label="pause button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-pause"></i>
</button>
<div class="a-timeline m-video__timeline">
<div class="a-timeline__time">
<label for="timeline-id-3" class="a-timeline__current"></label>
<span>/</span>
<label for="timeline-id-3" class="a-timeline__duration"></label>
</div>
<div class="a-timeline__range">
<input
tabindex="0"
id="timeline-id-3"
type="range"
min="0"
max="0"
aria-valuemin="0"
aria-valuemax="0"
aria-valuenow="0"
aria-label="video time scrubber"
value="0"
/>
</div>
</div>
<div class="m-video__volume-controllers">
<button
type="button"
class="a-button a-button--integrated -without-label m-video__volume-high-button -show"
aria-label="volume high button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-volume-high"></i>
</button>
<button
type="button"
class="a-button a-button--integrated -without-label m-video__volume-disabled-button"
aria-label="volume disabled button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-volume-disabled"></i>
</button>
<div
class="a-slider a-slider--vertical m-video__volume-slider -floating-shadow-s -primary"
>
<input
tabindex="0"
type="range"
min="0"
max="100"
step="any"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="50"
aria-orientation="vertical"
aria-label="volume"
aria-description="vertical volume slider"
value="50"
/>
</div>
</div>
<div
class="a-link a-link--button-integrated -icon m-video__transcript-button"
>
<a
aria-label="link to transscript of the video file"
href="/#"
target="_self"
>
<span><i class="a-icon boschicon-bosch-ic-transscript"></i></span>
</a>
</div>
<button
type="button"
class="a-button a-button--integrated -without-label m-video__fullscreen-button"
aria-label="fullscreen button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-fullscreen"></i>
</button>
<button
type="button"
class="a-button a-button--integrated -without-label m-video__subtitles-button"
aria-label="subtitles button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-subtitles"></i>
</button>
<button
type="button"
class="a-button a-button--integrated -without-label m-video__subtitles-off-button -show"
aria-label="subtitles off button"
>
<i
class="a-icon a-button__icon boschicon-bosch-ic-subtitles-off-light"
></i>
</button>
<div class="m-video__settings-controllers">
<button
type="button"
class="a-button a-button--integrated -without-label m-video__settings-controllers-button"
aria-label="settings button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-settings"></i>
</button>
<div class="m-video__settings-flyout -floating-shadow-s -primary">
<button
type="button"
class="a-button a-button--integrated m-video__download-button"
>
<i class="a-icon a-button__icon ui-ic-right"></i>
<span class="a-button__label">Download</span>
</button>
</div>
<ol
class="m-video__options m-video__download-options -floating-shadow-s -primary"
>
<li>
<button
type="button"
class="a-button a-button--integrated m-video__download-go-back-button"
>
<i class="a-icon a-button__icon ui-ic-left"></i>
<span class="a-button__label">Go Back</span>
</button>
</li>
<li>
<div
class="a-link a-link--integrated -icon m-audio__setting m-video__download-link"
>
<a
data-title="Sintel"
aria-label="Sintel"
href="https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.mp4"
download=""
>
<span>Sintel.mp4</span>
<span>
<i
class="a-icon boschicon-bosch-ic-download"
title="download"
></i>
</span>
</a>
</div>
</li>
<li>
<div
class="a-link a-link--integrated -icon m-audio__setting m-video__download-link"
>
<a
data-title="Sintel"
aria-label="Sintel"
href="https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.webm"
download=""
>
<span>Sintel.webm</span>
<span>
<i
class="a-icon boschicon-bosch-ic-download"
title="download"
></i>
</span>
</a>
</div>
</li>
<li>
<div
class="a-link a-link--integrated -icon m-audio__setting m-video__download-link"
>
<a
data-title="Sintel"
aria-label="Sintel"
href="https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.ogv"
download=""
>
<span>Sintel.ogv</span>
<span>
<i
class="a-icon boschicon-bosch-ic-download"
title="download"
></i>
</span>
</a>
</div>
</li>
</ol>
<ol
class="m-video__options m-video__playback-rate-options -floating-shadow-s -primary"
>
<li>
<button
type="button"
class="a-button a-button--integrated m-video__playback-rate-go-back-button"
>
<i class="a-icon a-button__icon ui-ic-left"></i>
<span class="a-button__label">Options</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="0.25"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">0.25</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="0.5"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">0.5</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="0.75"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">0.75</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="1"
>
<span class="m-video__playback-rate-checkmark active-rate">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">Normal</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="1.25"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">1.25</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="1.5"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">1.5</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="1.75"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">1.7</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="2"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">2</span>
</button>
</li>
</ol>
</div>
</div>
</div>Video with picture-in-picture setting only
/
<div class="m-video -primary">
<video
controlsList="nodownload noplaybackrate"
data-sources='[{"src":"https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.mp4","type":"mp4"},{"src":"https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.webm","type":"webm"},{"src":"https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.ogv","type":"ogv"}]'
>
<track src="/#" kind="captions" />
</video>
<div class="m-video__controls">
<button
type="button"
class="a-button a-button--integrated -without-label m-video__play-button -show"
aria-label="play button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-play"></i>
</button>
<button
type="button"
class="a-button a-button--integrated -without-label m-video__pause-button"
aria-label="pause button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-pause"></i>
</button>
<div class="a-timeline m-video__timeline">
<div class="a-timeline__time">
<label for="timeline-id-4" class="a-timeline__current"></label>
<span>/</span>
<label for="timeline-id-4" class="a-timeline__duration"></label>
</div>
<div class="a-timeline__range">
<input
tabindex="0"
id="timeline-id-4"
type="range"
min="0"
max="0"
aria-valuemin="0"
aria-valuemax="0"
aria-valuenow="0"
aria-label="video time scrubber"
value="0"
/>
</div>
</div>
<div class="m-video__volume-controllers">
<button
type="button"
class="a-button a-button--integrated -without-label m-video__volume-high-button -show"
aria-label="volume high button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-volume-high"></i>
</button>
<button
type="button"
class="a-button a-button--integrated -without-label m-video__volume-disabled-button"
aria-label="volume disabled button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-volume-disabled"></i>
</button>
<div
class="a-slider a-slider--vertical m-video__volume-slider -floating-shadow-s -primary"
>
<input
tabindex="0"
type="range"
min="0"
max="100"
step="any"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="50"
aria-orientation="vertical"
aria-label="volume"
aria-description="vertical volume slider"
value="50"
/>
</div>
</div>
<div
class="a-link a-link--button-integrated -icon m-video__transcript-button"
>
<a
aria-label="link to transscript of the video file"
href="/#"
target="_self"
>
<span><i class="a-icon boschicon-bosch-ic-transscript"></i></span>
</a>
</div>
<button
type="button"
class="a-button a-button--integrated -without-label m-video__fullscreen-button"
aria-label="fullscreen button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-fullscreen"></i>
</button>
<button
type="button"
class="a-button a-button--integrated -without-label m-video__subtitles-button"
aria-label="subtitles button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-subtitles"></i>
</button>
<button
type="button"
class="a-button a-button--integrated -without-label m-video__subtitles-off-button -show"
aria-label="subtitles off button"
>
<i
class="a-icon a-button__icon boschicon-bosch-ic-subtitles-off-light"
></i>
</button>
<div class="m-video__settings-controllers">
<button
type="button"
class="a-button a-button--integrated -without-label m-video__settings-controllers-button"
aria-label="settings button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-settings"></i>
</button>
<div class="m-video__settings-flyout -floating-shadow-s -primary">
<button
type="button"
class="a-button a-button--integrated m-video__picture-in-picture-button"
>
<i class="a-icon a-button__icon ui-ic-right"></i>
<span class="a-button__label">Picture in Picture</span>
</button>
</div>
<ol
class="m-video__options m-video__download-options -floating-shadow-s -primary"
>
<li>
<button
type="button"
class="a-button a-button--integrated m-video__download-go-back-button"
>
<i class="a-icon a-button__icon ui-ic-left"></i>
<span class="a-button__label">Go Back</span>
</button>
</li>
<li>
<div
class="a-link a-link--integrated -icon m-audio__setting m-video__download-link"
>
<a
data-title="Sintel"
aria-label="Sintel"
href="https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.mp4"
download=""
>
<span>Sintel.mp4</span>
<span>
<i
class="a-icon boschicon-bosch-ic-download"
title="download"
></i>
</span>
</a>
</div>
</li>
<li>
<div
class="a-link a-link--integrated -icon m-audio__setting m-video__download-link"
>
<a
data-title="Sintel"
aria-label="Sintel"
href="https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.webm"
download=""
>
<span>Sintel.webm</span>
<span>
<i
class="a-icon boschicon-bosch-ic-download"
title="download"
></i>
</span>
</a>
</div>
</li>
<li>
<div
class="a-link a-link--integrated -icon m-audio__setting m-video__download-link"
>
<a
data-title="Sintel"
aria-label="Sintel"
href="https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.ogv"
download=""
>
<span>Sintel.ogv</span>
<span>
<i
class="a-icon boschicon-bosch-ic-download"
title="download"
></i>
</span>
</a>
</div>
</li>
</ol>
<ol
class="m-video__options m-video__playback-rate-options -floating-shadow-s -primary"
>
<li>
<button
type="button"
class="a-button a-button--integrated m-video__playback-rate-go-back-button"
>
<i class="a-icon a-button__icon ui-ic-left"></i>
<span class="a-button__label">Options</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="0.25"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">0.25</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="0.5"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">0.5</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="0.75"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">0.75</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="1"
>
<span class="m-video__playback-rate-checkmark active-rate">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">Normal</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="1.25"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">1.25</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="1.5"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">1.5</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="1.75"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">1.7</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="2"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">2</span>
</button>
</li>
</ol>
</div>
</div>
</div>Video without settings
/
<div class="m-video -primary">
<video
controlsList="nodownload noplaybackrate"
disablepictureinpicture=""
data-sources='[{"src":"https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.mp4","type":"mp4"},{"src":"https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.webm","type":"webm"},{"src":"https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.ogv","type":"ogv"}]'
>
<track src="/#" kind="captions" />
</video>
<div class="m-video__controls">
<button
type="button"
class="a-button a-button--integrated -without-label m-video__play-button -show"
aria-label="play button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-play"></i>
</button>
<button
type="button"
class="a-button a-button--integrated -without-label m-video__pause-button"
aria-label="pause button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-pause"></i>
</button>
<div class="a-timeline m-video__timeline">
<div class="a-timeline__time">
<label for="timeline-id-5" class="a-timeline__current"></label>
<span>/</span>
<label for="timeline-id-5" class="a-timeline__duration"></label>
</div>
<div class="a-timeline__range">
<input
tabindex="0"
id="timeline-id-5"
type="range"
min="0"
max="0"
aria-valuemin="0"
aria-valuemax="0"
aria-valuenow="0"
aria-label="video time scrubber"
value="0"
/>
</div>
</div>
<div class="m-video__volume-controllers">
<button
type="button"
class="a-button a-button--integrated -without-label m-video__volume-high-button -show"
aria-label="volume high button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-volume-high"></i>
</button>
<button
type="button"
class="a-button a-button--integrated -without-label m-video__volume-disabled-button"
aria-label="volume disabled button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-volume-disabled"></i>
</button>
<div
class="a-slider a-slider--vertical m-video__volume-slider -floating-shadow-s -primary"
>
<input
tabindex="0"
type="range"
min="0"
max="100"
step="any"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="50"
aria-orientation="vertical"
aria-label="volume"
aria-description="vertical volume slider"
value="50"
/>
</div>
</div>
<div
class="a-link a-link--button-integrated -icon m-video__transcript-button"
>
<a
aria-label="link to transscript of the video file"
href="/#"
target="_self"
>
<span><i class="a-icon boschicon-bosch-ic-transscript"></i></span>
</a>
</div>
</div>
</div>Video with caption
/
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
<div class="m-video -primary">
<video
data-sources='[{"src":"https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.mp4","type":"mp4"},{"src":"https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.webm","type":"webm"},{"src":"https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.ogv","type":"ogv"}]'
>
<track src="/#" kind="captions" />
</video>
<div class="m-video__controls">
<button
type="button"
class="a-button a-button--integrated -without-label m-video__play-button -show"
aria-label="play button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-play"></i>
</button>
<button
type="button"
class="a-button a-button--integrated -without-label m-video__pause-button"
aria-label="pause button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-pause"></i>
</button>
<div class="a-timeline m-video__timeline">
<div class="a-timeline__time">
<label for="timeline-id-6" class="a-timeline__current"></label>
<span>/</span>
<label for="timeline-id-6" class="a-timeline__duration"></label>
</div>
<div class="a-timeline__range">
<input
tabindex="0"
id="timeline-id-6"
type="range"
min="0"
max="0"
aria-valuemin="0"
aria-valuemax="0"
aria-valuenow="0"
aria-label="video time scrubber"
value="0"
/>
</div>
</div>
<div class="m-video__volume-controllers">
<button
type="button"
class="a-button a-button--integrated -without-label m-video__volume-high-button -show"
aria-label="volume high button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-volume-high"></i>
</button>
<button
type="button"
class="a-button a-button--integrated -without-label m-video__volume-disabled-button"
aria-label="volume disabled button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-volume-disabled"></i>
</button>
<div
class="a-slider a-slider--vertical m-video__volume-slider -floating-shadow-s -primary"
>
<input
tabindex="0"
type="range"
min="0"
max="100"
step="any"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="50"
aria-orientation="vertical"
aria-label="volume"
aria-description="vertical volume slider"
value="50"
/>
</div>
</div>
<div
class="a-link a-link--button-integrated -icon m-video__transcript-button"
>
<a
aria-label="link to transscript of the video file"
href="/#"
target="_self"
>
<span><i class="a-icon boschicon-bosch-ic-transscript"></i></span>
</a>
</div>
<button
type="button"
class="a-button a-button--integrated -without-label m-video__fullscreen-button"
aria-label="fullscreen button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-fullscreen"></i>
</button>
<button
type="button"
class="a-button a-button--integrated -without-label m-video__subtitles-button"
aria-label="subtitles button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-subtitles"></i>
</button>
<button
type="button"
class="a-button a-button--integrated -without-label m-video__subtitles-off-button -show"
aria-label="subtitles off button"
>
<i
class="a-icon a-button__icon boschicon-bosch-ic-subtitles-off-light"
></i>
</button>
<div class="m-video__settings-controllers">
<button
type="button"
class="a-button a-button--integrated -without-label m-video__settings-controllers-button"
aria-label="settings button"
>
<i class="a-icon a-button__icon boschicon-bosch-ic-settings"></i>
</button>
<div class="m-video__settings-flyout -floating-shadow-s -primary">
<button
type="button"
class="a-button a-button--integrated m-video__download-button"
>
<i class="a-icon a-button__icon ui-ic-right"></i>
<span class="a-button__label">Download</span>
</button>
<button
type="button"
class="a-button a-button--integrated m-video__playback-rate-button"
>
<i class="a-icon a-button__icon ui-ic-right"></i>
<span class="a-button__label">Playback speed</span>
</button>
<button
type="button"
class="a-button a-button--integrated m-video__picture-in-picture-button"
>
<i class="a-icon a-button__icon ui-ic-right"></i>
<span class="a-button__label">Picture in Picture</span>
</button>
</div>
<ol
class="m-video__options m-video__download-options -floating-shadow-s -primary"
>
<li>
<button
type="button"
class="a-button a-button--integrated m-video__download-go-back-button"
>
<i class="a-icon a-button__icon ui-ic-left"></i>
<span class="a-button__label">Go Back</span>
</button>
</li>
<li>
<div
class="a-link a-link--integrated -icon m-audio__setting m-video__download-link"
>
<a
data-title="Sintel"
aria-label="Sintel"
href="https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.mp4"
download=""
>
<span>Sintel.mp4</span>
<span>
<i
class="a-icon boschicon-bosch-ic-download"
title="download"
></i>
</span>
</a>
</div>
</li>
<li>
<div
class="a-link a-link--integrated -icon m-audio__setting m-video__download-link"
>
<a
data-title="Sintel"
aria-label="Sintel"
href="https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.webm"
download=""
>
<span>Sintel.webm</span>
<span>
<i
class="a-icon boschicon-bosch-ic-download"
title="download"
></i>
</span>
</a>
</div>
</li>
<li>
<div
class="a-link a-link--integrated -icon m-audio__setting m-video__download-link"
>
<a
data-title="Sintel"
aria-label="Sintel"
href="https://brandguide-cdn.azureedge.net/frontend-kit/Sintel.ogv"
download=""
>
<span>Sintel.ogv</span>
<span>
<i
class="a-icon boschicon-bosch-ic-download"
title="download"
></i>
</span>
</a>
</div>
</li>
</ol>
<ol
class="m-video__options m-video__playback-rate-options -floating-shadow-s -primary"
>
<li>
<button
type="button"
class="a-button a-button--integrated m-video__playback-rate-go-back-button"
>
<i class="a-icon a-button__icon ui-ic-left"></i>
<span class="a-button__label">Options</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="0.25"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">0.25</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="0.5"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">0.5</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="0.75"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">0.75</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="1"
>
<span class="m-video__playback-rate-checkmark active-rate">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">Normal</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="1.25"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">1.25</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="1.5"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">1.5</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="1.75"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">1.7</span>
</button>
</li>
<li>
<button
type="button"
class="m-video__playback-rate-option a-button a-button--integrated -without-icon"
data-rate="2"
>
<span class="m-video__playback-rate-checkmark">
<i class="a-icon ui-ic-checkmark"></i>
</span>
<span class="a-button__label">2</span>
</button>
</li>
</ol>
</div>
<div class="m-video__caption">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt.
</div>
</div>
</div>additional content
styles SCSS
.m-video {
display: flex;
flex-wrap: wrap;
video {
width: 100%;
&:focus-visible {
@include focus-outside;
}
}
&__controls {
display: flex;
flex-wrap: wrap;
padding-inline: 0.5rem;
width: 100%;
}
&__play-button,
&__pause-button {
display: none;
}
&__play-button.-show,
&__pause-button.-show {
display: inline-flex;
}
&__timeDisplay {
align-items: center;
display: flex;
padding: 0 1rem;
}
&__timeline {
padding-inline: 1rem;
flex: 1;
}
&__volume-controllers {
position: relative;
}
&__volume-high-button,
&__volume-disabled-button {
display: none;
}
&__volume-high-button.-show,
&__volume-disabled-button.-show {
display: inline-flex;
}
&__volume-slider {
bottom: 5.65rem;
cursor: pointer;
display: none;
left: -2.65625rem;
padding: 1rem 0.75rem;
position: absolute;
z-index: 99;
input {
cursor: pointer;
width: 6.75rem;
}
&.-show {
display: flex;
}
}
&__subtitles-button,
&__subtitles-off-button {
display: none;
}
&__subtitles-button.-show,
&__subtitles-off-button.-show {
display: inline-flex;
}
&__settings-controllers {
position: relative;
}
&__settings-flyout {
bottom: 3rem;
display: none;
min-width: 15rem;
padding: 1rem;
position: absolute;
right: 0;
gap: 0.5rem;
&.-show {
display: block;
}
.a-button {
display: flex;
justify-content: space-between;
width: 100%;
}
.a-button__label,
.a-button__icon {
margin: 0;
padding: 0;
}
.a-button__icon {
order: 1;
}
.a-button.a-button--integrated:focus-visible {
@include focus-outside;
}
}
&__setting {
width: 100%;
a {
display: flex;
justify-content: space-between;
}
}
&__options {
bottom: 3rem;
display: none;
margin: 0;
min-width: 15rem;
overflow: auto;
padding: 1rem;
position: absolute;
right: 0;
&.-show {
display: block;
}
li {
margin-bottom: 0.625rem;
padding: 0;
&::before {
content: '';
}
.a-button .a-button__label {
padding: 0;
}
&:last-child {
margin-bottom: 0;
}
}
.a-button.a-button--integrated:focus-visible {
@include focus-outside
}
}
&__download-go-back-button,
&__playback-rate-go-back-button {
display: flex;
width: 100%;
.a-icon {
left: -0.5rem;
padding: 0;
position: relative;
}
}
&__playback-rate-go-back-button .a-icon {
margin-right: 0.25rem;
}
&__playback-rate-option {
display: flex;
width: 100%;
span {
display: flex;
width: 100%;
}
.m-video__playback-rate-checkmark {
flex: 1;
margin-right: 0.5rem;
visibility: hidden;
&.active-rate {
visibility: visible;
}
}
}
&__caption {
@include text-regular;
@include size-s;
margin: 0.5rem 0 0 0;
width: 100%;
}
}