Skip to content

Video

Scales video to fill container while keeping correct aspect ratio and inserts an accordion for a transcript if provided.

Table of Contents

  1. Anatomy
  2. Usage Guidelines
  3. Accessibility
  4. WordPress
  5. Specifications
    1. Properties
  6. Changelog
  7. Related
    1. Contains
  8. Examples

Anatomy

  1. Embed Container
  2. Transcript

Usage Guidelines

Videos can be placed in-page next to other content, or within a modal dialog window component. If a transcript is provided, it will be output in an accordion component underneath the embed container for the video.

Accessibility

If a transcript is provided, make sure that it accurately represents the content of the video.

WordPress

This component can be added to post content with the Video block or the Two Column - Media block in the Gutenberg editor.

Specifications

Properties

PropertyTypeDescriptionRequiredDefault
embedstring Script or iframe that embeds the video in the page. Should be just one top level HTML containerYes-
transcriptstring HTML string of content for the transcriptNo-

Changelog

6.9.0 (2024-04-16)

  • feat: updating instructions for iframe lazy loading (52d9abf), closes #569
  • feat: updating instructions for iframe lazy loading (3becc83)

1.32.0 (2022-04-26)

  • fix: updating video embed instructions (#249) (2d5174e)

1.30.0 (2022-04-01)

  • fix: allowing secure youtube to pause on exit of iframe (#224) (bc2cf83)

1.1.0

  • video added

Contains

Other core components embedded within this template.

Examples

Default

Inner heading

Nullam id dolor id nibh ultricies vehicula ut id elit.

{{ include( 'components/video.twig', {
	embed: "<iframe width="100%" height="auto" src="https://www.youtube.com/embed/XLpwPAB_0OI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>"
	transcript: "<h3>Inner heading</h3><p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>"
} ) }}