Video Player

Embedded video player for YouTube and hosted content.

WCAG 2.2 AA Reviewed April 2026

Design Guidance


Required	Video title, body text
Limitations	Title: 35 characters max · Body text: 150 characters max
Variants	Type = Vertical (primary) / Horizontal

Content Guidance

Title: Sentence case, no punctuation.
Body text: Sentence case, with punctuation.

Properties

Video image (thumbnail) — include link to video.
Video should not autoplay on page load for accessibility.
Alt text to be populated on CMS input.

Video Player With Thumbnail

Licenses & Permits

Video thumbnail for Licenses and Permits

View HTML

<div class="txds-video-player">
  <div class="txds-video-player__wrapper">
    <div class="txds-video-player__title-bar">
      <p class="txds-video-player__title">Licenses &amp; Permits</p>
    </div>
    <img class="txds-video-player__thumbnail" src="/assets/images/photos/building.png" alt="Video thumbnail for Licenses and Permits">
    <button type="button" class="txds-video-player__play" aria-label="Play video: Licenses and Permits"></button>
  </div>
</div>

Video Player With Iframe Embed

An example of an embedded YouTube video using the privacy-enhanced mode URL.

View HTML

<div class="txds-video-player">
  <div class="txds-video-player__wrapper">
    <iframe
      src="https://www.youtube-nocookie.com/embed/Q796ZN1vPbg?cc_load_policy=1"
      title="Example embedded video"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
    ></iframe>
  </div>
  <p class="txds-video-player__caption">An example of an embedded YouTube video using the privacy-enhanced mode URL.</p>
</div>

Accessibility Notes

Videos must not autoplay on page load.
Always provide a descriptive title attribute on <iframe> embeds.
Ensure captions are available and accurate for spoken content.
Provide a transcript link when possible.
Include alt text on thumbnail images.
Use the youtube-nocookie.com domain when embedding YouTube for privacy.

CSS Classes

Class	Description
`txds-video-player`	Base video player container.
`txds-video-player__wrapper`	16:9 aspect ratio wrapper for the video embed.
`txds-video-player__title-bar`	Gradient overlay bar at top with the video title.
`txds-video-player__title`	Video title text.
`txds-video-player__play`	Play button overlay on the thumbnail.
`txds-video-player__thumbnail`	Poster/thumbnail image when video is not playing.
`txds-video-player__caption`	Optional caption text below the video.