<div class="o-ambient-video js-video-parent ">
<div class="o-ambient-video__media">
<img src="/images/mountain.jpg" alt="mountains" />
<video src="/video/space.mp4" muted loop playsinline></video>
<button class="o-ambient-video__toggle js-video-toggle o-ambient-video__video-content" aria-label="Play Video" data-pauselabel="Pause Video" data-playlabel="Play Video">
<span class="o-ambient-video__icon--pause" aria-hidden="true">
<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="u-ct-stroke" d="M9 0.0341797L9 13.8789" stroke="#C34737" stroke-width="2" />
<path class="u-ct-stroke" d="M1 0.0341797L0.999999 13.8789" stroke="#C34737" stroke-width="2" />
</svg>
</span>
<span class="o-ambient-video__icon--play" aria-hidden="true">
<svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="u-ct-stroke" d="M1 15V1L12 8L1 15Z" stroke="#C34737" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</button>
</div>
<div class="o-ambient-video__description u-sr-only">
People enjoying life
</div>
<div class="o-ambient-video__details o-ambient-video__details--full">
<div class="o-ambient-video__details-content">
<p class="o-ambient-video__details-caption f-text--caption">Video caption goes here. Lorem ipsum dolor sit amet.</p>
<p class="o-ambient-video__details-credit f-text--credit">Credit: Lorem ipsum dolor</p>
</div>
<div class="o-ambient-video__audio-message o-ambient-video__video-content">
<p class="f-text--credit">This video does not contain audio</p>
</div>
</div>
</div>
{% set show_audio_message = hide_audio_message == false ? false : true %}
{% set audio_message = audio_message is defined ? audio_message : 'This video does not contain audio' %}
{% set play_label = play_label is defined ? play_label : 'Play Video' %}
{% set pause_label = pause_label is defined ? pause_label : 'Pause Video' %}
<div class="o-ambient-video js-video-parent {{ classes }}">
<div class="o-ambient-video__media">
{{ videoPoster }}
{% if videoUrl %}
<video src="{{ videoUrl }}" muted loop playsinline></video>
{% else %}
{{ vid }}
{% endif %}
<button class="o-ambient-video__toggle js-video-toggle o-ambient-video__video-content" aria-label="{{ play_label }}" data-pauselabel="{{ pause_label }}" data-playlabel="{{ play_label }}">
<span class="o-ambient-video__icon--pause" aria-hidden="true">
{% include "03-icons/pause" %}
</span>
<span class="o-ambient-video__icon--play" aria-hidden="true">
{% include "03-icons/play" %}
</span>
</button>
</div>
{% if description %}
<div class="o-ambient-video__description u-sr-only">
{{ description }}
</div>
{% endif %}
{% if showDetails %}
<div class="o-ambient-video__details{% if caption or credit %} o-ambient-video__details--full{% endif %}">
{% if caption or credit %}
<div class="o-ambient-video__details-content">
{% if caption %}
<p class="o-ambient-video__details-caption f-text--caption">{{ caption }}</p>
{% endif %}
{% if credit %}
<p class="o-ambient-video__details-credit f-text--credit">{{ credit }}</p>
{% endif %}
</div>
{% endif %}
{% if show_audio_message %}
<div class="o-ambient-video__audio-message o-ambient-video__video-content">
<p class="f-text--credit">{{ audio_message }}</p>
</div>
{% endif %}
</div>
{% else %}
{% if show_audio_message %}
<div class="o-ambient-video__audio-message o-ambient-video__video-content">
<p class="f-text--credit">{{ audio_message }}</p>
</div>
{% endif %}
{% endif %}
</div>
{
"pageColorTheme": "teal",
"videoPoster": "<img src=\"/images/mountain.jpg\" alt=\"mountains\" />",
"description": "People enjoying life",
"videoUrl": "/video/space.mp4",
"caption": "Video caption goes here. Lorem ipsum dolor sit amet.",
"credit": "Credit: Lorem ipsum dolor",
"showDetails": true
}
.o-ambient-video {
position: relative;
overflow: hidden;
opacity: 0;
}
.o-ambient-video--can-animate {
opacity: 1;
transition: opacity 0.2s ease;
}
.o-ambient-video__media {
position: relative;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
video {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.o-ambient-video__toggle {
display: flex;
width: 4.4rem;
height: 4.4rem;
position: absolute;
z-index: 9999;
bottom: 1rem;
right: 1rem;
color: $c-black;
align-items: center;
justify-content: center;
&:before {
content: '';
display: block;
width: 4rem;
height: 4rem;
background-color: $c-white;
position: absolute;
border-radius: 50%;
transition: all 0.2s ease;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 0.2rem solid $c-white;
}
&:hover,
&:focus {
cursor: pointer;
color: $c-white;
&:before {
background-color: transparent;
width: 5rem;
height: 5rem;
}
}
span {
position: relative;
z-index: 2;
top: -0.1rem;
}
}
.o-ambient-video--is-playing {
img {
display: none;
}
.o-ambient-video__icon--pause {
display: block;
}
.o-ambient-video__icon--play {
display: none;
}
}
.o-ambient-video__icon--play {
position: relative;
left: 0.1rem;
}
.o-ambient-video--is-paused {
img {
display: none;
}
.o-ambient-video__icon--pause {
display: none;
}
.o-ambient-video__icon--play {
display: block;
}
}
.o-ambient-video__details {
display: flex;
justify-content: flex-end;
margin-top: 1.6rem;
}
.o-ambient-video__details--full {
justify-content: space-between;
}
.o-ambient-video__details-caption + .o-ambient-video__details-credit {
margin-top: 0.4rem;
}
.o-ambient-video__audio-message {
font-size: 1.2rem;
line-height: 1.15;
font-style: italic;
}
// Prefers No Motion
.o-ambient-video--no-motion {
video,
.o-ambient-video__video-content {
display: none !important;
}
img {
display: block !important;
}
}
// Video Error
.o-ambient-video--video-error,
.o-ambient-video--no-motion {
opacity: 1;
video,
.o-ambient-video__video-content {
display: none;
}
}
No notes defined.