128 lines
9.7 KiB
HTML
128 lines
9.7 KiB
HTML
{% comment %}
|
|
|
|
Video modal feature from an item's objectid or external link.
|
|
This include adds a card featuring the thumb image, title, and description of a video--when clicked it opens a modal containing the video embed. The modal displays video information, transcript, link to item. This is especially useful feature if you would like multiple videos on one page.
|
|
|
|
E.G. --> {% include feature/video-modal.html objectid="demo_004" %}
|
|
|
|
It requires an "objectid" with the include, which is used to find the video details. Alternatively, a URL to an external video can be used in "objectid".
|
|
YouTube and Vimeo items will use iframe embeds, video files use html video element.
|
|
|
|
Options:
|
|
- "objectid" = several options below (required)
|
|
1. an objectid of a video item in this collection, e.g. "demo_003"
|
|
2. a full URL to a video hosted on YouTube, e.g. https://youtu.be/dbKNr3wuiuQ
|
|
3. a full URL to a video hosted on Vimeo, e.g. https://vimeo.com/464555587
|
|
4. a full URL to an external video file (supported by browsers, generally mp4), e.g. "https://www.lib.uidaho.edu/digital/videos/fluffyclouds.mp4"
|
|
5. a relative link to a video file stored in this repository (that is not included in the collection), i.e. "/assets/videos/cloudyskies.mp4"
|
|
- "title" = by default automatically adds the title from item metadata, which will be used for the card and modal title. Manually set by using the title option. (optional)
|
|
- "heading_level" = customize the level of the card heading if necessary for accessibility, choose "h1", "h2", "h3", etc (optional, default "h2")
|
|
- "caption" = by default the include automatically adds the description of the item from your metadata. The caption option allows you to manually add a different caption, or give the value false for none. (optional)
|
|
- "transcript" = by default if using an objectid, if the item has a object_transcript value, the view transcript button will automatically be added. The transcript option allows you to manually add a different transcript or provide one for non-collection videos. (optional)
|
|
- "image" = by default if using an objectid, if the item has a image_small value, the image will be used on the card and as the poster for video file embeds (not youtube). The image option allows you to manually add a image for non-collection videos. Give "false" to have no image displayed on the card (optional)
|
|
- "ratio" = use Bootstrap embed ratio options "21x9", "16x9", "4x3", or "1x1" to customize the responsive aspect ratio. 16by9 is default. (optional)
|
|
|
|
Note: if you have issues make sure the item is a video item and a web friendly format
|
|
|
|
|
|
{% endcomment %}
|
|
{%- if include.objectid contains '/' -%}
|
|
{%- capture video_title -%}{{ include.title }}{%- endcapture -%}
|
|
{% capture video_caption %}{{ include.caption }}{% endcapture %}
|
|
{% capture video_poster %}{{ include.image }}{% endcapture %}
|
|
{% capture video_transcript %}{{ include.transcript }}{% endcapture %}
|
|
{% capture raw_src %}{{ include.objectid }}{% endcapture %}
|
|
{%- capture video_link -%}{{ raw_src | relative_url }}{%- endcapture -%}
|
|
{%- else -%}
|
|
{%- assign item = site.data[site.metadata] | where: "objectid", include.objectid | first -%}
|
|
{%- capture video_title -%}{% if include.title %}{{ include.title }}{% else %}{{ item.title }}{% endif %}{%- endcapture -%}
|
|
{% capture video_caption %}{% if include.caption %}{{ include.caption }}{% else %}{{ item.description }}{% endif %}{% endcapture %}
|
|
{% capture video_poster %}{{ include.image | default: item.image_small | default: '' }}{% endcapture %}
|
|
{% capture video_transcript %}{{ include.transcript | default: item.object_transcript }}{% endcapture %}
|
|
{% capture raw_src %}{{ item.object_location }}{% endcapture %}
|
|
{%- capture video_link -%}{{ '/items/' | relative_url }}{% if item.parentid %}{{ item.parentid }}.html#{{ item.objectid }}{% else %}{{ item.objectid }}.html{% endif %}{%- endcapture -%}
|
|
{%- endif -%}
|
|
{%- if raw_src contains 'vimeo' -%}
|
|
{% assign vimeo_id = raw_src | split: '/' | last %}
|
|
{% capture video_src %}https://player.vimeo.com/video/{{ vimeo_id }}{% endcapture %}
|
|
{% assign video_type = 'vimeo' %}
|
|
{%- elsif raw_src contains 'youtu' -%}
|
|
{% assign youtube_id = raw_src | split: '/' | last %}
|
|
{% if youtube_id contains 'v=' %}{% assign youtube_id = youtube_id | split: 'v=' | last | split: '&' | first %}
|
|
{% elsif youtube_id contains '?' %}{% assign youtube_id = youtube_id | split: '?' | first %}{% endif %}
|
|
{% capture video_src %}https://www.youtube-nocookie.com/embed/{{ youtube_id }}?enablejsapi=1&rel=0&modestbranding=1{% endcapture %}
|
|
{% assign video_type = 'youtube' %}
|
|
{%- else -%}
|
|
{% assign video_src = raw_src | relative_url %}
|
|
{% assign video_type = 'video' %}
|
|
{%- endif -%}
|
|
{% capture includeid %}{% if include.objectid.size > 10 %}{{ include.objectid | slice: -10, 10 | slugify | replace: "-","_" }}{% else %}{{ include.objectid | slugify | replace: "-","_" }}{% endif %}{% endcapture %}
|
|
{% capture stop_media %}{% endcapture %}
|
|
<script>
|
|
function stopMedia{{ includeid }}() {
|
|
{% if video_type == 'youtube' %}const message = JSON.stringify({ event: 'command', func: 'pauseVideo', args: '' }); document.querySelector('#{{ includeid }}ModalVideo iframe').contentWindow.postMessage(message, '*');{% elsif video_type == 'vimeo' %}document.querySelector('#{{ includeid }}ModalVideo iframe').contentWindow.postMessage('{"method":"pause"}', '*');{% else %}document.querySelector('#{{ includeid }}ModalVideo video').pause();{% endif %}
|
|
}
|
|
</script>
|
|
<div class="card my-3 narrow-content">
|
|
{% if include.image != false and video_poster != '' %}<img src="{{ video_poster | relative_url }}" class="card-img-top" alt="{{ video_title | escape }}">{% endif %}
|
|
<div class="card-body text-center">
|
|
<{{ include.heading_level | default: 'h2' | strip }} class="card-title h2">{{ video_title }}</{{ include.heading_level | default: 'h2' | strip }}>
|
|
<p class="card-text">{{ video_caption }}</p>
|
|
<button class="btn btn-sm btn-primary stretched-link" type="button" data-bs-toggle="modal" data-bs-target="#{{ includeid }}Modal">
|
|
View Video
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi icon-sprite" viewBox="0 0 16 16">
|
|
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
|
|
<path d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="{{ includeid }}Modal" tabindex="-1" aria-labelledby="{{ includeid }}ModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
|
|
<div class="modal-dialog modal-lg modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title fs-5" id="{{ includeid }}ModalLabel">{{ video_title }}</h1>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="stopMedia{{ includeid }}()"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<figure class="">
|
|
<div class="ratio ratio-{{ include.ratio | default: '16x9' }}" id="{{ includeid }}ModalVideo">
|
|
{%- if video_src contains "vimeo" or video_src contains "youtu" -%}
|
|
<iframe title="video embed {{ video_title | escape }}" src="{{ video_src }}" allowfullscreen></iframe>
|
|
{% else %}
|
|
<video {% if video_poster %}poster="{{ video_poster | relative_url }}"{% endif %} preload="metadata" controls>
|
|
<source src="{{ video_src }}">
|
|
Your browser does not support the video tag, please <a href="{{ video_link }}">download the file to watch</a>.
|
|
</video>
|
|
{%- endif -%}
|
|
</div>
|
|
{% unless include.caption == false %}
|
|
<figcaption class="figure-caption text-center">
|
|
{{ video_caption }}
|
|
</figcaption>
|
|
{% endunless %}
|
|
</figure>
|
|
</div>
|
|
<div class="modal-footer">
|
|
{% if video_transcript != '' %}
|
|
<div class="collapse mt-3 w-100" id="collapseTranscript{{ includeid }}">
|
|
<div class="card card-body text-start">
|
|
{% assign transcript_type = video_transcript | slice: 0,1 %}
|
|
{% if transcript_type == '/' %}
|
|
{% assign transcript_location = video_transcript | remove_first: '/' %}
|
|
{% assign transcript = site.pages | where: 'path', transcript_location | first %}
|
|
{{ transcript.content | markdownify }}
|
|
{% else %}
|
|
{{ video_transcript | markdownify }}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-outline-primary m-2" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTranscript{{ includeid }}" aria-expanded="false" aria-controls="collapseTranscript{{ includeid }}">View Transcript</button>
|
|
{% endif %}
|
|
{% unless include.objectid contains '/' %}
|
|
<a href="{{ video_link }}" class="btn btn-outline-dark m-2">Visit Item Page</a>{% endunless %}
|
|
<button type="button" class="btn btn-dark" data-bs-dismiss="modal" onclick="stopMedia{{ includeid }}()">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |