Video

A video component is used to display video content and an optional video caption consistently.

A video caption provides context about the video, if necessary. The “Download video transcript” link allows the user to download a .txt file transcription of the video content.

Example

Download video transcript

<video
  aria-label="Lorem Ipsum"
  class="bux-video"
  src="/images/placeholders/hero-video-clip.webm"
  controls
>
  <track
    label="English"
    kind="captions"
    srclang="en"
    src="/text/placeholder-captions.vtt"
    default
  />
</video>

<div class="bux-video-transcription">
  <a
    class="bux-link bux-link--before"
    href="/text/placeholder-text.txt"
    target="_blank"
    rel="noopener"
  >
    <span class="bux-link__text bux-link__text--underline">
      Download video transcript
    </span>
  </a>
</div>

{#
Buckeye UX - version 1.5.0
Copyright (C) 2026 The Ohio State University
#}

{#

Video

Available Variables:
  - video_url:             URL for the video.
  - video_url_mp4:         Optional. URL for the video (mp4).
  - video_url_webm:        Optional. URL for the video (webm).
  - video_url_ogv:         Optional. URL for the video (ogv).
  - video_aria_label:      String for the video aria label.
  - caption:               Optional. Boolean. Set to true to enable captions.
  - caption_text:          Optional. String for the caption text.
  - caption_attribution:   Optional. String for the caption attribution.
  - transcript_url:        URL for the video transcript.
  - transcript_link_text:  String for the video transcript URL.
  - tracks:                Array of track objects with properties: label, kind, srclang, src, default

This DocBlock is auto-generated and any changes could be overwritten.
Use the component's corresponding *.config.ts to make changes to this file.

Last Updated: 04-01-2026 10:38:41
#}

{% set video_content %}
  <video aria-label="{{ video_aria_label }}" class="bux-video {{ class }}" src="{{ video_url }}" controls>
    {% if video_url_mp4 %}
      <source src="{{ video_url_mp4 }}" type="video/mp4/" />
    {% endif %}
    {% if video_url_webm %}
      <source src="{{ video_url_webm }}" type="video/webm" />
    {% endif %}
    {% if video_url_ogv %}
      <source src="{{ video_url_ogv }}" type="video/ogv" />
    {% endif %}

    {% if tracks %}
      {% for track in tracks %}
        <track
          label="{{ track.label }}"
          kind="{{ track.kind|default('subtitles') }}"
          srclang="{{ track.srclang }}"
          src="{{ track.src }}"
          {{ track.default ? ' default' : '' }}
        />
      {% endfor %}
    {% endif %}
  </video>

  {% if caption %}
    <figcaption class="bux-video-caption">
      <div class="bux-video-caption__text">
        {{ caption_text }}
        {% if caption_attribution %}
          ({{ caption_attribution }})
        {% endif %}
      </div>
    </figcaption>
  {% endif %}
{% endset %}

{% if caption %}
  <figure>
    {{ video_content }}
  </figure>
{% else %}
  {{ video_content }}
{% endif %}

{% if transcript_url %}
  <div class="bux-video-transcription">
    {% include '@bux/link/link.twig' with {
      modifier: 'before',
      link_url: transcript_url,
      link_text: transcript_link_text,
      isExternal: true
    } %}
  </div>
{% endif %}

Usage

Dos

• Include a video caption for additional context and/or source attribution, if possible

Don’ts

• Do not autoplay video content.

Implementation Notes

Video Sources

• You can provide multiple video sources (mp4, webm, ogv) and browsers will select the first source that works.

Captioning/Subtitles

• Closed captions and subtitles can be included by adding track elements within the <video> element. The native HTML <video> element will recognize these tracks and display captioning options in the player controls.
• Only one track should have the default attribute. This determines which track is enabled by default when the video loads.
• Track files must be in WebVTT format (.vtt file extension).

Figure Captioning

• A <figcaption> should not serve as a replacement for video captioning/subtitles and should only serve to provide additional context.

Accessibility

• Captions and Transcripts for Video
• Videos having caption text that describe the video need to have their caption associated with the video using the <figure> and <figcaption>. This is different than the closed captions for the video content.
• Ensure that the Video Caption component is never used outside of a<figure>element