Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(video-embed): add rh-video-embed #1514

Merged
merged 79 commits into from
Aug 13, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
79 commits
Select commit Hold shift + click to select a range
478f460
feat(video): init video
Mar 12, 2024
5a18450
docs(accessibility): added multimedia section
Mar 26, 2024
6a5bca1
docs(accessibility): added resources page
Mar 26, 2024
ce924b7
docs(accessibility): fixed audio-video styles
Mar 26, 2024
f0537ce
docs(accessibility): fixed link inside blockquote
Mar 26, 2024
590d6f2
feat(video): added demos
Apr 4, 2024
a308cbe
feat(video): a11y refactor
Apr 4, 2024
61d3959
feat(video): updated cookie consent feature
Apr 4, 2024
fd9c03b
feat(video): updated styles
Apr 4, 2024
c8c46b4
Merge branch 'main' into feat/video
nikkimk Apr 4, 2024
99bd934
docs(video): init docs
Apr 5, 2024
5b5bc93
Merge branch 'feat/video' of github.com:RedHat-UX/red-hat-design-syst…
Apr 5, 2024
c2a8495
Merge branch 'docs-accessibility-finish-pagessectionscontent' of gith…
Apr 5, 2024
d111f3a
feat(video): updated dark and light themes
Apr 5, 2024
6cbf43d
docs(video): updated demos
Apr 5, 2024
4fa1127
docs(video): added accessibility docs
Apr 5, 2024
4fdf306
test(video): finished tests
Apr 12, 2024
b14b9f8
Merge branch 'main' of github.com:RedHat-UX/red-hat-design-system int…
Apr 12, 2024
312832e
docs(video): removed repo status from overview temporarily
Apr 19, 2024
611aaa6
Merge branch 'main' into feat/video
zeroedin Apr 29, 2024
20e58d0
Merge branch 'main' into feat/video
adamjohnson May 6, 2024
31ba00f
Merge branch 'staging/charmander' into feat/video
zeroedin May 6, 2024
7379075
chore(video): add changeset
adamjohnson May 6, 2024
7ccfbab
Merge branch 'feat/video' of github.com:RedHat-UX/red-hat-design-syst…
adamjohnson May 6, 2024
c19452d
docs(video): use Red Hat OpenShift video for embed
adamjohnson May 6, 2024
ea86fe8
test(video): fix cookie consent tests
adamjohnson May 7, 2024
17c3567
chore(video): lint typescript
adamjohnson May 7, 2024
b5fa350
fix(video): caption text color and margin
adamjohnson May 7, 2024
69b84c9
fix(video): fix typescript compilation error
adamjohnson May 7, 2024
f7c8898
Merge branch 'staging/charmander' into feat/video
adamjohnson May 7, 2024
f1c2b29
fix(video): fix SVG displaying overtop of button
adamjohnson May 7, 2024
8b9d991
Merge branch 'staging/charmander' into feat/video
adamjohnson Jun 5, 2024
d0cd5f4
fix(video): remove double slash from fakeimg.pl URL
adamjohnson Jun 5, 2024
5801a7d
feat(video): make `rh-video` responsive
adamjohnson Jun 5, 2024
00da739
fix(video): update consent spacing
adamjohnson Jun 5, 2024
483136e
docs(video): make demos larger (900px by 499px)
adamjohnson Jun 5, 2024
6722f29
feat(video): add CSS Shadow Parts
adamjohnson Jun 5, 2024
69f7f22
feat(video): add alignment demo
adamjohnson Jun 5, 2024
01c3a02
fix(video): remove bottom margin from container
adamjohnson Jun 5, 2024
d971d26
feat(video): add card + video demo
adamjohnson Jun 5, 2024
136ebb8
fix(video): use logical styling properties
adamjohnson Jun 5, 2024
4502b02
Merge branch 'staging/charmander' into feat/video
zeroedin Jun 25, 2024
147cdf0
docs(video): remove old shortcodes and placeholders
zeroedin Jun 26, 2024
4d3f1d6
Merge branch 'staging/charmander' into feat/video
zeroedin Jun 26, 2024
4698c0a
Merge branch 'staging/charmander' into feat/video
adamjohnson Jun 28, 2024
ab3d7ad
fix(video): remove prose from demos
adamjohnson Jun 28, 2024
840904d
docs(video): update RH homepage URL to use https
adamjohnson Jun 28, 2024
2b9cf50
docs(video): add content to readme
adamjohnson Jun 28, 2024
7af288a
docs(video): stub out accessibility page
adamjohnson Jun 28, 2024
cfd93ce
fix(video): change consent prop to past tense
adamjohnson Jun 28, 2024
2730f6a
feat(video): add class to `iframe` embed
adamjohnson Jul 1, 2024
741c150
feat(video): don't show related videos on pause/end
adamjohnson Jul 1, 2024
949e562
docs(video): fix shortcode build error
adamjohnson Jul 1, 2024
0f5263e
fix(video): remove `dark.html`, add color context demo
adamjohnson Jul 8, 2024
806b1c2
fix(video): use `rh-button` for play button
adamjohnson Jul 8, 2024
6a8a0e5
fix(video): use token values for dark play btn opacity
adamjohnson Jul 9, 2024
12d85a7
docs(video): improve event and attr descriptions
adamjohnson Jul 10, 2024
cd0364b
docs(video): fix warning about bracketed type
adamjohnson Jul 10, 2024
d0bd1ce
Merge branch 'staging/charmander' into feat/video
adamjohnson Jul 11, 2024
b54bbc3
Merge branch 'staging/charmander' into feat/video
adamjohnson Jul 24, 2024
d538519
docs(video): add docs content and images
adamjohnson Jul 24, 2024
22281fa
docs(video): add links to guidelines and a11y pages
adamjohnson Jul 25, 2024
a49dba9
docs(video): add missing guidelines images
adamjohnson Jul 25, 2024
bc3cefd
docs(video): add play icon to overview preview image
adamjohnson Jul 25, 2024
102785a
fix(video): enforce caption font size
adamjohnson Jul 26, 2024
523055c
fix(video): harden caption spacing
adamjohnson Jul 26, 2024
5196393
docs(video): add installation instructions to README
adamjohnson Jul 26, 2024
b11141b
Merge branch 'staging/charmander' into feat/video
adamjohnson Jul 30, 2024
806911b
docs(video): remove play button from sample element thumbnail
adamjohnson Jul 30, 2024
ed34ef0
fix(video): align video and caption in alignment demo
adamjohnson Jul 31, 2024
8bdcd18
Merge branch 'staging/charmander' into feat/video
adamjohnson Aug 5, 2024
b31d91e
fix(video): remove a few play button icon styles
adamjohnson Aug 5, 2024
5010b92
Merge branch 'staging/charmander' into feat/video
adamjohnson Aug 8, 2024
c23ab59
Merge branch 'staging/charmander' into feat/video
adamjohnson Aug 8, 2024
e32a4c0
fix(video): update event name to `request-play`
adamjohnson Aug 8, 2024
7e75d06
Merge branch 'staging/charmander' into feat/video
adamjohnson Aug 8, 2024
643fc5c
Merge branch 'staging/charmander' into feat/video
zeroedin Aug 12, 2024
4a4b767
refactor(video-embed): rename `video` to `video-embed`
adamjohnson Aug 13, 2024
2fd546c
Merge branch 'staging/charmander' into feat/video
adamjohnson Aug 13, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions .changeset/dirty-countries-brake.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
---
"@rhds/elements": minor
---

✨ Added `<rh-video-embed>`

A video embed is a graphical preview of a video overlayed with a play button. When clicked, the YouTube video will begin playing.

```html
<rh-video-embed>
<img slot="thumbnail" src="https://fakeimg.pl/900x499/282828/eae0d0" alt="Image description"/>
<template>
<iframe title="Title of video" width="900" height="499" src="https://www.youtube.com/embed/Hc8emNr2igU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</template>
<p slot="caption"><a class="rh-video-embed-caption-link" href="https://www.redhat.com/">View the infographic</a></p>
</rh-video-embed>
```
3 changes: 3 additions & 0 deletions docs/_data/relatedItems.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,9 @@ sticky-card:
- announcement
- rh-dialog
- sticky-banner
rh-video-embed:
- rh-audio-player
- rh-button
video-thumbnail:
- rh-audio-player

2 changes: 1 addition & 1 deletion docs/_includes/partials/accessibility/1.2.1-A.md
Original file line number Diff line number Diff line change
@@ -1 +1 @@
- [SC 1.2.1 Audio-only and Video-only (Prerecorded)](https://www.w3.org/WAI/WCAG21/Understanding/audio-only-and-video-only-prerecorded.html) (Level A)
- [SC 1.2.1 Audio-only and video-only (prerecorded)](https://www.w3.org/WAI/WCAG21/Understanding/audio-only-and-video-only-prerecorded.html) (Level A)
2 changes: 1 addition & 1 deletion docs/_includes/partials/accessibility/1.2.2-A.md
Original file line number Diff line number Diff line change
@@ -1 +1 @@
- [SC 1.2.2 Captions (Prerecorded)](https://www.w3.org/WAI/WCAG21/Understanding/captions-prerecorded.html) (Level A)
- [SC 1.2.2 Captions (prerecorded)](https://www.w3.org/WAI/WCAG21/Understanding/captions-prerecorded.html) (Level A)
1 change: 1 addition & 0 deletions docs/_includes/partials/accessibility/1.2.3-A.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- [SC 1.2.3 Audio description or media alternative (prerecorded)](https://www.w3.org/WAI/WCAG21/Understanding/audio-description-or-media-alternative-prerecorded.html) (Level A)
1 change: 1 addition & 0 deletions docs/_includes/partials/accessibility/1.2.4-AA.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- [SC 1.2.4 Captions (live)](https://www.w3.org/WAI/WCAG21/Understanding/captions-live.html) (Level AA)
1 change: 1 addition & 0 deletions docs/_includes/partials/accessibility/1.2.5-AA.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- [SC 1.2.5 Audio description (prerecorded)](https://www.w3.org/WAI/WCAG21/Understanding/audio-description-prerecorded.html) (Level AA)
2 changes: 1 addition & 1 deletion docs/_includes/partials/accessibility/1.3.1-A.md
Original file line number Diff line number Diff line change
@@ -1 +1 @@
- [SC 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html) (Level A)
- [SC 1.3.1 Info and relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html) (Level A)
2 changes: 1 addition & 1 deletion docs/_includes/partials/accessibility/1.4.1-A.md
Original file line number Diff line number Diff line change
@@ -1 +1 @@
- [SC 1.4.1 Use of Color](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html) (Level A)
- [SC 1.4.1 Use of color](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html) (Level A)
2 changes: 1 addition & 1 deletion docs/_includes/partials/accessibility/2.1.3-AAA.md
Original file line number Diff line number Diff line change
@@ -1 +1 @@
- [SC 2.1.3 Keyboard (No exception)](https://www.w3.org/WAI/WCAG21/Understanding/keyboard-no-exception) (Level AAA)
- [SC 2.1.3 Keyboard (no exception)](https://www.w3.org/WAI/WCAG21/Understanding/keyboard-no-exception) (Level AAA)
1 change: 1 addition & 0 deletions docs/_includes/partials/accessibility/2.4.7-AA.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- [SC 2.4.7 Focus visible](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html) (Level AA)
31 changes: 31 additions & 0 deletions elements/rh-video-embed/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
# Video

A video embed is a graphical preview of a video overlayed with a play button. When clicked, the YouTube video will begin playing.

## Installation

If using npm/bundlers:

```bash
npm install @rhds/elements
```

Then once installed, import it to your application:

```js
import '@rhds/elements/rh-video-embed/rh-video-embed.js';
```

## Usage

Use this component if you want to embed a YouTube video on a page. This component only loads the required YouTube embed code when a user clicks on the play button.

```html
<rh-video-embed>
<img slot="thumbnail" src="https://fakeimg.pl/900x499/282828/eae0d0" alt="Image description"/>
<template>
<iframe title="Title of video" width="900" height="499" src="https://www.youtube.com/embed/Hc8emNr2igU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</template>
<p slot="caption"><a class="rh-video-embed-caption-link" href="https://www.redhat.com/">View the infographic</a></p>
</rh-video-embed>
```
40 changes: 40 additions & 0 deletions elements/rh-video-embed/demo/alignment.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<div class="wrap">
<rh-video-embed class="centered">
<img slot="thumbnail" src="https://fakeimg.pl/900x499/282828/eae0d0?text=Centered" alt="Image description"/>
<template>
<iframe title="Title of video" width="900" height="499" src="https://www.youtube.com/embed/Hc8emNr2igU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</template>
<p slot="caption"><a class="rh-video-embed-caption-link" href="https://www.redhat.com/">View the infographic</a></p>
</rh-video-embed>
</div>

<div class="wrap">
<rh-video-embed class="right-aligned">
<img slot="thumbnail" src="https://fakeimg.pl/900x499/282828/eae0d0?text=Right" alt="Image description"/>
<template>
<iframe title="Title of video" width="900" height="499" src="https://www.youtube.com/embed/Hc8emNr2igU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</template>
<p slot="caption"><a class="rh-video-embed-caption-link" href="https://www.redhat.com/">View the infographic</a></p>
</rh-video-embed>
</div>
<script type="module">
import '@rhds/elements/rh-video-embed/rh-video-embed.js';
</script>

<style>
.wrap:not(:first-of-type) {
border-block-start: var(--rh-border-width-sm, 1px) solid var(--rh-color-border-subtle-on-light, #c7c7c7);
margin-block-start: var(--rh-space-2xl, 32px);
padding-block-start: var(--rh-space-2xl, 32px);
}

.centered {
justify-content: center;
text-align: center;
}

.right-aligned {
justify-content: end;
text-align: end;
}
</style>
38 changes: 38 additions & 0 deletions elements/rh-video-embed/demo/card-with-video.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<div class="wrapper">
<rh-card>
<rh-video-embed slot="header">
<img slot="thumbnail" src="https://fakeimg.pl/900x499/282828/eae0d0" alt="Image description"/>
<template>
<iframe title="Title of video" width="900" height="499" src="https://www.youtube.com/embed/Hc8emNr2igU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</template>
</rh-video-embed>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam eleifend elit sed est egestas, a sollicitudin mauris
tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
<rh-cta variant="secondary" slot="footer">
<a href="#">Call to action</a>
</rh-cta>
</rh-card>
</div>

<script type="module">
import '@rhds/elements/rh-video-embed/rh-video-embed.js';
import '@rhds/elements/rh-cta/rh-cta.js';
import '@rhds/elements/rh-card/rh-card.js';
</script>

<style>
main {
display: block;
}

.wrapper {
max-width: 900px;
display: block;
}

rh-card::part(header) {
margin: 0;
}
</style>
14 changes: 14 additions & 0 deletions elements/rh-video-embed/demo/color-context.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<rh-context-demo>
<rh-video-embed>
<img slot="thumbnail" src="https://fakeimg.pl/900x499/282828/eae0d0" alt="Image description"/>
<template>
<iframe title="Title of video" width="900" height="499" src="https://www.youtube.com/embed/Hc8emNr2igU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</template>
<p slot="caption">Video caption here</p>
</rh-video-embed>
</rh-context-demo>

<script type="module">
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
import '@rhds/elements/rh-video-embed/rh-video-embed.js';
</script>
10 changes: 10 additions & 0 deletions elements/rh-video-embed/demo/no-caption.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<rh-video-embed>
<img slot="thumbnail" src="https://fakeimg.pl/900x499/282828/eae0d0" alt="Image description"/>
<template>
<iframe title="Title of video" width="900" height="499" src="https://www.youtube.com/embed/Hc8emNr2igU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</template>
</rh-video-embed>

<script type="module">
import '@rhds/elements/rh-video-embed/rh-video-embed.js';
</script>
23 changes: 23 additions & 0 deletions elements/rh-video-embed/demo/require-consent.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<rh-video-embed id="video" require-consent>
<img slot="thumbnail" src="https://fakeimg.pl/900x499/282828/eae0d0" alt="Image description"/>
<template>
<iframe title="Title of video" width="900" height="499" src="https://www.youtube.com/embed/Hc8emNr2igU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</template>
<p slot="caption"><a class="rh-video-embed-caption-link" href="https://www.redhat.com/">View the infographic</a></p>
</rh-video-embed>

<script type="module">
import '@rhds/elements/rh-video-embed/rh-video-embed.js';

const video = document.getElementById('video');
video.addEventListener('consent-click', consentWindow);


function consentWindow() {
// replace with custom consent logic
if (confirm('Allow cookies?')) {
// enables video after consent
video.consented = true;
}
}
</script>
11 changes: 11 additions & 0 deletions elements/rh-video-embed/demo/rh-video-embed.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<rh-video-embed>
<img slot="thumbnail" src="https://fakeimg.pl/900x499/282828/eae0d0" alt="Image description"/>
<template>
<iframe title="Title of video" width="900" height="499" src="https://www.youtube.com/embed/Hc8emNr2igU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</template>
<p slot="caption"><a class="rh-video-embed-caption-link" href="https://www.redhat.com/">View the infographic</a></p>
</rh-video-embed>

<script type="module">
import '@rhds/elements/rh-video-embed/rh-video-embed.js';
</script>
31 changes: 31 additions & 0 deletions elements/rh-video-embed/docs/00-overview.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
## Overview

{{ tagName | getElementDescription }}

A video embed element is a graphical preview of a video overlayed with a play button. When clicked, the YouTube video will begin playing.

<uxdot-example width-adjustment="555px">
<img src="{{ './video-sample.svg' | url }}" alt="Red Hat Logo on a gray background">
</uxdot-example>

{% repoStatusList repoStatus=repoStatus %}

## Sample element

<div class="grid sm-two-columns">
<rh-video-embed>
<img slot="thumbnail" src="{{ './video-sample-thumb.svg' | url }}" alt="Red Hat Logo on a gray background"/>
<template>
<iframe title="Red Hat OpenShift AI overview" width="900" height="499" src="https://www.youtube.com/embed/Hc8emNr2igU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</template>
<p slot="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</rh-video-embed>
</div>

## When to use

- When you need to embed a YouTube video on a page
- When you want a faster YouTube embed
- When you don’t want to load several megabytes of JavaScript for a YouTube embed

{% repoStatusChecklist repoStatus=repoStatus %}
108 changes: 108 additions & 0 deletions elements/rh-video-embed/docs/10-style.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
## Style

The video embed element consists of a semitransparent play button with a video thumbnail that overlays the embedded video when it is not playing. There is also an optional slot for a caption that describes the video.

## Anatomy

<figure>
<uxdot-example width-adjustment="555px">
<img src="{{ '../video-anatomy.svg' | url }}" alt="Anatomy of a video component with numbered annotations.">
</uxdot-example>
<figcaption>
<ol>
<li>Thumbnail</li>
<li>Play button</li>
<li>Caption</li>
</ol>
</figcaption>
</figure>

## Theme

The video embed element is available in both light and dark themes. It can include either a light or a dark play button, depending on the thumbnail image underneath. If an image is lighter, use a dark play button for accessibility and vice versa.

<div class="grid xs-two-columns">
<uxdot-example width-adjustment="420px">
<img src="{{ '../video-theme-light.svg' | url }}" alt="Light theme video with the Red Hat logo and a play button on a light gray background">
</uxdot-example>

<uxdot-example width-adjustment="420px" color-palette="darkest">
<img src="{{ '../video-theme-dark.svg' | url }}" alt="Dark theme video with the Red Hat logo and a play button on a black background">
</uxdot-example>
</div>

## Configuration

### Caption

The caption can be left-, right-, or center-aligned, depending on how the video is oriented. By default, it is left-aligned.

<div class="grid sm-three-columns">
<uxdot-example width-adjustment="248px">
<img src="{{ '../video-caption-align-left.svg' | url }}" alt="Video with caption, below, left aligned">
</uxdot-example>

<uxdot-example width-adjustment="248px">
<img src="{{ '../video-caption-align-center.svg' | url }}" alt="Video with caption, below, center aligned">
</uxdot-example>

<uxdot-example width-adjustment="248px">
<img src="{{ '../video-caption-align-right.svg' | url }}" alt="Video with caption, below, right aligned">
</uxdot-example>
</div>


## Space

Space values remain the same at all viewport sizes.

<uxdot-example width-adjustment="555px">
<img src="{{ '../video-space.svg' | url }}" alt="Diagram of spacing for video" />
</uxdot-example>


## States

Interaction states are visual representations used to communicate the status of an element or pattern.

### Hover

The play button’s opacity increases upon hover.

<div class="grid xs-two-columns">
<uxdot-example width-adjustment="420px">
<img src="{{ '../video-hover-light.svg' | url }}" alt="Light theme video on a gray background with a darker play button on hover">
</uxdot-example>

<uxdot-example width-adjustment="420px" color-palette="darkest">
<img src="{{ '../video-hover-dark.svg' | url }}" alt="Dark theme video on a black background with a lighter play button on hover">
</uxdot-example>
</div>

### Focus

On focus, the entire video embed element is outlined by a focus ring, and the play button uses the same opacity as the hover state.

<div class="grid xs-two-columns">
<uxdot-example width-adjustment="420px">
<img src="{{ '../video-focus-light.svg' | url }}" alt="Light theme video with a focus ring outlining the video and a darker play button">
</uxdot-example>

<uxdot-example width-adjustment="420px" color-palette="darkest">
<img src="{{ '../video-focus-dark.svg' | url }}" alt="Dark theme video with a focus ring outlining the video and a lighter play button">
</uxdot-example>
</div>

### Active

The active state is the same as the focus state.

<div class="grid xs-two-columns">
<uxdot-example width-adjustment="420px">
<img src="{{ '../video-active-light.svg' | url }}" alt="Light theme video with a focus ring outlining the video and a darker play button">
</uxdot-example>

<uxdot-example width-adjustment="420px" color-palette="darkest">
<img src="{{ '../video-active-dark.svg' | url }}" alt="Dark theme video with a focus ring outlining the video and a lighter play button">
</uxdot-example>
</div>
Loading
Loading