<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
  • Content:
    .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;
      }
    }
  • URL: /components/raw/video/_video.scss
  • Filesystem Path: src/components/video/_video.scss
  • Size: 428 Bytes

No notes defined.