Youtube Short Code - GSA/digitalgov.gov GitHub Wiki

Back

Youtube

Embeds a youtube player in page content.

Overview

There are two ways to display a youtube player: a short code used on content pages or on an event page that uses two front matter fields.

field/short code description function
youtube_id frontmatter field that takes a youtube id front matter field for an event page
youtube_title front matter field that displays a title for screen readers front matter field for an event page
youtube short code component short code for content pages

Guidance

youtube short code

field description required
id youtube video id yes
title title that will be displayed for screen readers yes
start_time starting time position in seconds optional

Examples

Basic Youtube Player

{{< youtube id="LE6F_X91UF8" title="Inclusive civic design: Engaging diverse communities to improve the early career experience" >}}
Example Screenshot 2025-01-29 at 9 22 47 AM

Live page: 2023 Government UX Summit.

Usage

Embeds a youtube player into the main content block, will not autoplay.

Youtube Player with Start Time

To set an automatic start time when the user presses play, use the start_time.

{{< youtube id="5R-6WvAihms" title="Screen Reader Basics: VoiceOver" start_time="145" >}}
Example Screenshot 2025-01-29 at 9 27 12 AM
Getting the time for a video Navigate to the time with the scrollbar and click share and check **start at** Screenshot 2025-01-29 at 9 28 47 AM

Live page; Accessibility for teams.

Usage

Embeds a youtube player into the main content block with a certain start time.

Event Page Youtube Player

Event pages provide two front matter fields to set the id and title. They are both set together.

  • If not provided, then no video will display
  • If provided, then youtube video will display at top of the page
youtube_id: 8zkHN3rxXHw
youtube_title: "Continuously improve your website by using customer feedback and web analytics: An IRS case study"
Example Screenshot 2025-01-29 at 9 35 03 AM

Live page: Continuously improve your website by using customer feedback and web analytics: An IRS case study.

Usage

Embeds a youtube player into the top of the page.

⚠️ **GitHub.com Fallback** ⚠️