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.

Sign up for GitHub

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

docs(video embed): update "Theme" section #2125

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

docs(video embed): update "Theme" section #2125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5719a5a
docs(video embed): update theming information
marionnegp Jan 14, 2025
c7a8864
docs(video embed): update "Theme" section wording
marionnegp Jan 14, 2025
55bdfbf
docs(video embed): remove intro sentence for each best practice
marionnegp Jan 14, 2025
0f52ca4
Merge branch 'main' into docs/video-embed-theme
marionnegp Jan 15, 2025
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
2 changes: 1 addition & 1 deletion elements/rh-video-embed/docs/10-style.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ The video embed element consists of a semitransparent play button with a video t

## 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.
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. The user is currently responsible for setting the play button color and preventing color contrast issues between the button and the video thumbnail.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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. The user is currently responsible for setting the play button color and preventing color contrast issues between the button and the video thumbnail.
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. The user is currently responsible for setting the play button color and preventing color contrast issues between the button and the video thumbnail. For example, if the video embed uses a dark color palette or is on a dark background, the play button colour must be light, and vice-versa.


<div class="grid xs-two-columns">
<uxdot-example width-adjustment="420px">
Expand Down
4 changes: 0 additions & 4 deletions elements/rh-video-embed/docs/20-guidelines.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,6 @@ The video’s width will dynamically adjust with its parent container. The video

### Play button

Display the play button in a consistent, predictable spot for all videos.

<div class="grid xs-two-columns">
<uxdot-best-practice variant="do">
<uxdot-example color-palette="lightest" width-adjustment="420px" slot="image">
Expand All @@ -87,8 +85,6 @@ Display the play button in a consistent, predictable spot for all videos.

### Aspect Ratio

A video embed element and should have the same aspect ratio as the video it’s displaying.

<div class="grid xs-two-columns">
<uxdot-best-practice variant="do">
<uxdot-example color-palette="lightest" width-adjustment="420px" slot="image">
Expand Down
Loading