Video: With Caption

{#

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 %}