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">
  <div class="bux-link-container bux-link-container--before">
    <a
      class="bux-link bux-link--before"
      href="/text/placeholder-text.txt"
      target="_blank"
    >
      Download video transcript
    </a>
  </div>
</div>

{#
Buckeye UX - version 1.3.1
Copyright (C) 2025 The Ohio State University
#}


{#

Video

Available variables:

- class:                List of optional classes for the video.
- video_url_mp4:        URL for the video (mp4).
- video_url_webm:       URL for the video (webm).
- video_url_ogv:        URL for the video (ogv).
- video_aria_label:		String for the video aria label.
- caption:              Boolean. Set to true to enable caption.
- caption_text:         String for the caption text.
- caption_attribution:  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:            Display name for the track
      kind:             Type of track (subtitles, captions, descriptions, chapters, metadata)
      srclang:          Language code (e.g., 'en', 'es', 'de')
      src:              URL to the track file
      default:          Boolean for default track (optional)

#}

{% if caption %}
<figure>
{% endif %}

<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 }}"
                    {% if track.default %}default{% endif %} />
        {% 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>
</figure>
{% endif %}

{% if transcript_url %}
<div class="bux-video-transcription">
	{% set vars = {
		'modifier': 'before',
		'link_url': transcript_url,
		'link_text': transcript_link_text,
        'isExternal': true
	} %}
	{% include base_path ~ directory ~ bux ~ '/twig/link.twig' with vars %}
</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