<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"
      }
    }
  }
}
  • Content:
    .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;
        }
      }
    }
    
  • URL: /components/raw/ambient-video/ambient-video.scss
  • Filesystem Path: patterns/organisms/interactive/ambient-video/ambient-video.scss
  • Size: 812 Bytes
  • Content:
    /* This demonstrates initializing the ambient video; the final 
       script should not be included in an integrated project. */
    document.addEventListener('DOMContentLoaded', () => {
      ambient_video();
    });
  • URL: /components/raw/ambient-video/ambient-video-init.js
  • Filesystem Path: patterns/organisms/interactive/ambient-video/ambient-video-init.js
  • Size: 202 Bytes
  • Content:
    /* 
     * 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()
        });
      }
    };
    
  • URL: /components/raw/ambient-video/ambient-video.js
  • Filesystem Path: patterns/organisms/interactive/ambient-video/ambient-video.js
  • Size: 1.1 KB

Title: Ambient Video

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.