Video

Moving pictures


How we design them

  • Add a splash screen so that the user can see something while the video is loading
  • Remember to optimise the splash image - it’ll look a bit daft if the splash image loads after the video
  • If your video doesn’t feature a play button of its own, feel free to use a white play button or black play button
  • If using, the fill-opacity on the play icon should be tweaked to allow a small amount of the splash to be seen through it
  • Don’t add noise to the side of the splash image, this might get hidden as the video scales
  • Move the splash image around so that the play button doesn’t clash with the image

How they look

A standard YouTube video

View demo Open in new window
320 x 568
View code
<style>
  .video-documentation-splash {
    background-image: url('/images/video-splash-2.png');
  }
</style>

<figure class="gg-c-video js-video">
  <div  class="gg-c-video__iframe" id="video-id"></div>
  <button class="gg-c-video__splash js-video__play-button video-documentation-splash">
    <span class="gg-u-screen-reader-only">Play video</span>
  </button>
</figure>

<script async src="https://www.youtube.com/iframe_api"></script>
<script>
  const youTubeId = document.getElementById('video-id');
  const videoEl = document.querySelector('.js-video');
  const playButton = videoEl.querySelector('.js-video__play-button');
  let player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player(youTubeId, {
      videoId: 'cu31qnSrTNk',
      width: "100%",
      height: "100%",
      playerVars: {
        autoplay: 0,
        modestbranding: 1,
        origin: 1,
        autohide: 0,
        rel: 0
      }
    });
  }
  playButton.onclick = ()=> {
    videoEl.classList.add('gg-c-video--hide-splash');
    player.playVideo();
  }
</script>

With white play icon

View demo Open in new window
320 x 568
View code
<style>
  .video-documentation-splash {
    background-image: url('/images/video-splash.png');
  }
</style>

<figure class="gg-c-video js-video">
  <div  class="gg-c-video__iframe" id="video-id"></div>
  <button class="gg-c-video__splash js-video__play-button video-documentation-splash">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="gg-c-video__play-icon" fill-opacity=".9">
      <g fill-rule="nonzero" class="gg-c-video__play-icon-shine">
        <rect width="6.86" height="1.81" x="41.14" y="22.64" rx=".91"/>
        <path d="M13.67 1.66l2.6 4.75c.23.43.09.97-.33 1.22a.83.83 0 0 1-1.16-.31l-2.6-4.75a.91.91 0 0 1 .33-1.22.83.83 0 0 1 1.16.31zM36.84 3.48l-2.6 4.74a.83.83 0 0 1-1.16.32.91.91 0 0 1-.32-1.22l2.6-4.75a.83.83 0 0 1 1.15-.31c.42.25.56.79.33 1.22zM13.9 46.75L16.5 42a.91.91 0 0 0-.33-1.22.83.83 0 0 0-1.16.31l-2.6 4.75a.91.91 0 0 0 .33 1.22.83.83 0 0 0 1.16-.31zM37.07 44.94l-2.6-4.75a.83.83 0 0 0-1.16-.3.91.91 0 0 0-.32 1.2l2.6 4.76a.83.83 0 0 0 1.15.3.91.91 0 0 0 .33-1.21z"/>
        <rect width="6.86" height="1.81" y="22.64" rx=".91"/>
      </g>
      <path d="M0 .38V48l48-23.81z"/>
    </svg>
    <span class="gg-u-screen-reader-only">Play video</span>
  </button>
</figure>

<script async src="https://www.youtube.com/iframe_api"></script>
<script>
  const youTubeId = document.getElementById('video-id');
  const videoEl = document.querySelector('.js-video');
  const playButton = videoEl.querySelector('.js-video__play-button');
  let player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player(youTubeId, {
      videoId: 'cu31qnSrTNk',
      width: "100%",
      height: "100%",
      playerVars: {
        autoplay: 0,
        modestbranding: 1,
        origin: 1,
        autohide: 0,
        rel: 0
      }
    });
  }
  playButton.onclick = ()=> {
    videoEl.classList.add('gg-c-video--hide-splash');
    player.playVideo();
  }
</script>

With black play icon

View demo Open in new window
320 x 568
View code
<style>
  .video-documentation-splash {
    background-image: url('/images/video-splash-2.png');
  }
</style>

<figure class="gg-c-video js-video">
  <div  class="gg-c-video__iframe" id="video-id"></div>
  <button class="gg-c-video__splash js-video__play-button video-documentation-splash">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="gg-c-video__play-icon gg-c-video__play-icon--black" fill-opacity=".8">
      <g fill-rule="nonzero" class="gg-c-video__play-icon-shine">
        <rect width="6.86" height="1.81" x="41.14" y="22.64" rx=".91"/>
        <path d="M13.67 1.66l2.6 4.75c.23.43.09.97-.33 1.22a.83.83 0 0 1-1.16-.31l-2.6-4.75a.91.91 0 0 1 .33-1.22.83.83 0 0 1 1.16.31zM36.84 3.48l-2.6 4.74a.83.83 0 0 1-1.16.32.91.91 0 0 1-.32-1.22l2.6-4.75a.83.83 0 0 1 1.15-.31c.42.25.56.79.33 1.22zM13.9 46.75L16.5 42a.91.91 0 0 0-.33-1.22.83.83 0 0 0-1.16.31l-2.6 4.75a.91.91 0 0 0 .33 1.22.83.83 0 0 0 1.16-.31zM37.07 44.94l-2.6-4.75a.83.83 0 0 0-1.16-.3.91.91 0 0 0-.32 1.2l2.6 4.76a.83.83 0 0 0 1.15.3.91.91 0 0 0 .33-1.21z"/>
        <rect width="6.86" height="1.81" y="22.64" rx=".91"/>
      </g>
      <path d="M0 .38V48l48-23.81z"/>
    </svg>
    <span class="gg-u-screen-reader-only">Play video</span>
  </button>
</figure>

<script async src="https://www.youtube.com/iframe_api"></script>
<script>
  const youTubeId = document.getElementById('video-id');
  const videoEl = document.querySelector('.js-video');
  const playButton = videoEl.querySelector('.js-video__play-button');
  let player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player(youTubeId, {
      videoId: 'cu31qnSrTNk',
      width: "100%",
      height: "100%",
      playerVars: {
        autoplay: 0,
        modestbranding: 1,
        origin: 1,
        autohide: 0,
        rel: 0
      }
    });
  }
  playButton.onclick = ()=> {
    videoEl.classList.add('gg-c-video--hide-splash');
    player.playVideo();
  }
</script>