Video block

Use to communicate complex information visually through a video.

Description

This component provides a YouTube video block that can be used anywhere on a page.

How to use

  1. Copy the video-block markup from the example.
  2. Change the video URL and make sure enablejsapi=1 param is added.
  3. Add data-js-video-block-container="{video-name}" to a chosen ancestor element - the video block will fill this container when activated.
  4. Make sure all data-js attributes use the same video name. You don't need a value on data-js-video-block-player.

Good to know

  • position: relative will be added to the marked container if its position is static.
  • The video player always maintains a 16:9 aspect ratio while the video-block covers the entire container providing letterboxing.
  • The video starts playing automatically when it becomes visible and pauses when it's hidden.
  • This component does not need the YouTube Iframe API for it to work.
  • You can make the video always visible by adding a video-block--visible class on the video block element. The data-js-video-block-trigger elements are optional.
  • You can have as many video blocks on one page as you want, provided they use different names.

Activate Sass component

In order to have the styling of this component available, you need to include it in your project. After including the Radius library in your main ./index.scss file, add this snippet:

@include radius-component-video-block;

Import JS functionality

In order to have the JS functionality of this component available, you need to include it in your project. Assuming the project is using ES6:

import video-block from 'radius/dist/m2dm/js/video-block';
videoBlock();

Usage

Usage example

Simple example

Use with other components

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Morbi metus risus, mollis ut varius id, mattis a ligula. Cras leo ligula, porttitor eu vehicula vel, consectetur non odio. Morbi at lectus in nibh fringilla volutpat.

Donec tristique lacus

Nulla fermentum tempor neque ac pellentesque. In vel imperdiet eros.

Curabitur a est suscipit, iaculis nunc vel, dignissim lectus.

Code example

<div class="content__component-example">
  <div class="component-variant__heading">
    <h4 class="component-variant__title">Simple example</h4>
    <p></p>
  </div>

  <button type="button" data-js-video-block-trigger="video-simple" class="cta-primary">Play video</button>

  <div data-js-video-block-container="video-simple" class="placeholder-component">
    <div class="video-block" data-js-video-block="video-simple">
      <svg class="video-block__close svg-icon svg-icon--inverse" data-js-video-block-trigger="video-simple">
        <use xlink:href="/m2dm-public/assets/icons/svg-sprite.svg#cross-circle-outline"></use>
      </svg>
      <iframe data-js-video-block-player src="https://www.youtube.com/embed/XOkdthoKKVI?enablejsapi=1&showinfo=0" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>

<div class="content__component-example">
  <div class="component-variant__heading">
    <h4 class="component-variant__title">Use with other components</h4>
    <p></p>
  </div>

  <div class="u-equal-columns-horizontal">
    <div class="text-block text-block--small u-pv-large">
      <div class="">
        <h2 class="section-heading section-heading--small">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </h2>
        <p class="text-block__paragraph">
          Morbi metus risus, mollis ut varius id, mattis a ligula. Cras leo ligula, porttitor eu vehicula vel, consectetur non odio. Morbi at lectus in nibh fringilla volutpat. 
        </p>
        <a class="cta-link" href="/de/firmenkredit-rate-ermitteln">Donec tristique lacus</a>
      </div>
    </div>
    <section class="case-study small-case-study case-study--small case-study--bottom case-study--left" data-js-video-block-container="video-case-study">
      <div class="case-study__inner">
        <div class="case-study__content component-variant__customisation--inverse">
          <p class="u-color-white">Nulla fermentum tempor neque ac pellentesque. In vel imperdiet eros.</p>
          <button type="button" data-js-video-block-trigger="video-case-study" class="control-button control-button--inverse">
            <svg class="svg-icon svg-icon--small">
              <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#play"></use>
            </svg>
            Play video
          </button>
        </div>
      </div>

      <div class="video-block" data-js-video-block="video-case-study">
        <svg class="video-block__close svg-icon svg-icon--inverse" data-js-video-block-trigger="video-case-study">
          <use xlink:href="/m2dm-public/assets/icons/svg-sprite.svg#cross-circle-outline"></use>
        </svg>
        <iframe data-js-video-block-player src="https://www.youtube.com/embed/XOkdthoKKVI?enablejsapi=1&showinfo=0" frameborder="0" allowfullscreen></iframe>
      </div>
    </section>
  </div>
</div>

<div class="content__component-example">
  <section class="case-study case-study--small case-study--bottom case-study--left" data-js-video-block-container="video-case-study-2">
    <div class="case-study__inner">
      <div class="case-study__content">
        <p class="u-color-white">Curabitur a est suscipit, iaculis nunc vel, dignissim lectus.</p>
        <button type="button" data-js-video-block-trigger="video-case-study-2" class="control-button control-button--inverse">
          <svg class="svg-icon svg-icon--small">
            <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#play"></use>
          </svg>
          Play video
        </button>

        <div class="video-block" data-js-video-block="video-case-study-2">
          <svg class="video-block__close svg-icon svg-icon--inverse" data-js-video-block-trigger="video-case-study-2">
            <use xlink:href="/m2dm-public/assets/icons/svg-sprite.svg#cross-circle-outline"></use>
          </svg>
          <iframe data-js-video-block-player src="https://www.youtube.com/embed/XOkdthoKKVI?enablejsapi=1&showinfo=0" frameborder="0" allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </section>
</div>