YouTube video

Use the YouTube component when you need an embedded YouTube clip with caption and layout options.

AEM publisher guidelines

View the component in Figma

Live demo

Visitors play video in context without leaving the site. Content authors supply the video id or URL, a descriptive title for the iframe (for screen readers), and optional caption copy. Visual designers align aspect ratio and margins with other media blocks; avoid autoplay with sound unless policy allows it.

Behaviour

  • The component builds an embed URL from the authored id or link.
  • Optional caption appears below the embed when enabled.

Anatomy

  1. Responsive wrapper for the iframe.
  2. Embedded player from YouTube.
  3. Optional caption block.

YouTube embed (placeholder)

Replace with 16:9 embed and caption.

Content guidelines

  • The iframe title should describe the video purpose, not a generic string.
  • Consider a link to the same video on YouTube for users who cannot use the embed.

Best practices

Do

  • Prefer captioned uploads on YouTube; the embed may expose YouTube’s own CC UI.

Don't

  • Don't autoplay with sound; respect platform embed parameters and policy.

When to use

  • Hosted marketing or lecture clips on YouTube where privacy and third-party embed policies allow.

When not to use

  • Self-hosted video with subtitles you fully control; consider Media player for DAM assets.

CRXDE Lite query

Use this query in CRXDE Lite to find instances of this component.

/jcr:root/content//*[@sling:resourceType = 'concordia/components/youtube/youtube.html']

Technical behaviour

youtube.html renders a div wrapper and an iframe pointing at model.embedUrl. title uses a descriptive string from the model for the iframe title attribute. Optional caption markup appears below when hasCaption is true.

Authoring

Authors supply video identifier or link, title for accessibility, and optional caption (see Coral dialog under youtube/_cq_dialog).

Instances in the codebase

Location Notes
apps/concordia/components/youtube/youtube.html HTL.
org.concordia.wcms.core.models.YouTubeModel Embed URL and metadata.
Item Location
HTL apps/concordia/components/youtube/youtube.html
Model org/concordia/wcms/core/models/YouTubeModel.java