<video aria-label="Lorem Ipsum" class="bux-video " src="/images/placeholders/hero-video-clip.webm" controls>
</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>
{#
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.
#}
{% 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 %}
</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 '@link' with vars %}
</div>
{% endif %}
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
video_url: /images/placeholders/hero-video-clip.webm
video_aria_label: Lorem Ipsum
transcript_url: /text/placeholder-text.txt
transcript_link_text: Download video transcript
.bux-video {
display: block;
width: 100%;
}
.bux-video-caption {
border-bottom: 2px solid $gray-light-80;
}
.bux-video-caption__text {
font-family: $sans;
font-size: 14px;
line-height: 18px;
margin: $sp-8 0 10px;
}
.bux-video-transcription {
float: right;
margin-top: $sp-4;
.bux-link {
font-family: $sans;
font-size: 14px;
line-height: 18px;
}
.bux-link-container {
padding: 0;
}
}
No notes defined.