<div class="ambient-video">
<div id="ambientVideo" data-url="https://player.vimeo.com/video/333393822"></div>
<button class="button " id="ambientPause"><span class="icon "><span class="icon__glyph ic ic--pause" aria-hidden="true"></span><span class="icon__label">Pause Video</span></span></button></div>
<div class="ambient-video">
<div id="ambientVideo" data-url="{{ ambient.video }}"></div>
{% include '@icon-button' with { button: ambient.button } %}
</div>
{
"ambient": {
"video": "https://player.vimeo.com/video/333393822",
"button": {
"icon": {
"glyph": "ic--pause",
"label": "Pause Video"
},
"attr_obj": {
"id": "ambientPause"
}
}
}
}
.ambient-video {
position: relative;
width: 100%;
min-height: 56.25vw;
overflow: hidden;
padding-top: 1px;
@include rr-break-directive(m) {
min-height: 30vh;
}
@include rr-break-directive(l) {
min-height: 50vh;
}
@include rr-break-directive(xl) {
min-height: 56.25vw;
}
button {
position: absolute;
bottom: 1rem;
left: 1rem;
padding: rem(12px) rem(14px);
border: 0;
background-color: rgba(color(davidson-white), .7);
color: color(davidson-black);
z-index: 20;
.icon {
@include icon-link-hidden-label();
}
}
iframe {
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 56.25vw;
transform: translate(-50%, -50%);
@include rr-break-directive(l) {
pointer-events: none;
}
}
}
/* This demonstrates initializing the ambient video; the final
script should not be included in an integrated project. */
document.addEventListener('DOMContentLoaded', () => {
ambient_video();
});
/*
* Ambient video processing and initialization.
*/
const ambient_video = () => {
$ = jQuery;
const $av = $('#ambientVideo');
if ($av.length <= 0) return;
const url = $av.data('url');
const autoplay = window.matchMedia('(min-width: 70rem)').matches;
const Player = new Vimeo.Player('ambientVideo', {
url: url,
width: 1440,
background: autoplay,
loop: true,
muted: true
});
const $control = $('#ambientPause');
$control.hide();
$control.on('click', e => {
const $button = $(e.currentTarget);
$button.toggleClass('video-button--paused');
Player.getPaused().then((paused)=> {
if (paused) {
Player.play();
$button.attr('aria-label', 'Pause background video');
$button.find('.icon__glyph').removeClass('ic--play-triangle').addClass('ic--pause');
} else {
Player.pause();
$button.attr('aria-label', 'Play background video');
$button.find('.icon__glyph').removeClass('ic--pause').addClass('ic--play-triangle');
}
});
});
if (autoplay) {
Player.on('play', function() {
$control.show()
});
}
};
An ambient Vimeo video with a play / pause control. This has some dependencies in the main javascript file. You will need to provide a video source.