Video Embed

Definition

A video embed is a snippet of code used to display a video to website users when the video is hosted on another website.

Usage and Specifications

A video embed code is used to render a video within a webpage so that users do not have to leave the website or load another page to watch the video.

The code typically contains the video title, URL, file size, and title at a minimum. Other information that can be included:

  • Source URL indicating where the video is hosted, i.e., YouTube, Vimeo, etc.
  • iFrame, an HTML container that allows insertion of HTML inside a webpage.
    • For example: <iframe width="560" height="315" src="https://www.youtube.com/embed/2frabZ34KzQ?si=gwKbIDX327r_j0ed" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    • If using a video embed code on the Columbia Sites platform, see the Columbia Sites User Guide.
  • Height and width of the video; default aspect ratios usually can be adjusted as needed.
  • For YouTube, to prevent related videos from playing at the end of a video, add the code snippet “?rel=0” directly after the url component within the embed code.
    • For example: <iframe width="560" height="315" src="https://www.youtube.com/embed/2frabZ34KzQ?si=gwKbIDX327r_j0ed" title="YouTube video player?rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>)

Accessibility

Video embed codes should ensure the video is accessible and primed for search engine optimization (SEO). A title, description, and captions improve web visibility, accessibility, and user experience. Embed codes from YouTube and Vimeo include pause and play buttons, which are necessary for accessibility compliance. If you create an iframe from scratch, you must include these.

Accessible video embed codes also provide users with an inclusive experience by ensuring the ability to utilize assistive devices that provide a means to navigate a site using keyboard commands such as the tab to play and pause a video.

For more information about making your video accessible, visit the Creating Accessible Video page on the University accessibility website.

Examples

YouTube Embed

<style>
#player-container {
  position: relative;
  width: 560px; /* or responsive % */
  height: 315px;
}

#player {
  width: 100%;
  height: 100%;
}

#play-pause-btn {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0,0,0,0.7);
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 18px;
}
</style>
<div id="player-container">
  <div id="player"></div>
  <button id="play-pause-btn" role="button" aria-label="Play video" aria-pressed="false">▶️</button>
</div>
<script>
  let player;
  let isPlaying = false;

  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      videoId: 'RP_7jLhzQ-U', // Replace with your YouTube video ID
      playerVars: {
        'controls': 0,
        'rel': 0,
        'showinfo': 0,
        'modestbranding': 1,
        'iv_load_policy': 3,
        'fs': 0
      },
      events: {
        'onReady': onPlayerReady
      }
    });
  }

  function onPlayerReady(event) {
    const button = document.getElementById('play-pause-btn');
    button.addEventListener('click', () => {
      if (isPlaying) {
        player.pauseVideo();
        button.textContent = '▶️';
        button.setAttribute('aria-label', 'Play video');
        button.setAttribute('aria-pressed', 'false');
      } else {
        player.playVideo();
        button.textContent = '⏸️';
        button.setAttribute('aria-label', 'Pause video');
        button.setAttribute('aria-pressed', 'true');
      }
      isPlaying = !isPlaying;
    });
  }
</script>
<script src="https://www.youtube.com/iframe_api"></script>

Vimeo Embed

<style>
#vimeo-container {
  position: relative;
  width: 640px; /* or responsive % */
  height: 360px;
  overflow: hidden;
}

#vimeo-player {
  width: 100%;
  height: 100%;
}

#vimeo-play-pause-btn {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0,0,0,0.7);
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 18px;
  z-index: 10;
}
</style>
<div id="vimeo-container">
  <iframe id="vimeo-player" src="https://player.vimeo.com/video/60574750?background=1&autoplay=0" frameborder="0" allow="fullscreen" allowfullscreen></iframe>
  <button id="vimeo-play-pause-btn" role="button" aria-label="Play video" aria-pressed="false">▶️</button>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
  const iframe = document.getElementById('vimeo-player');
  const player = new Vimeo.Player(iframe);
  const button = document.getElementById('vimeo-play-pause-btn');
  let isPlaying = false;

  button.addEventListener('click', () => {
    if (isPlaying) {
      player.pause();
      button.textContent = '▶️';
      button.setAttribute('aria-label', 'Play video');
      button.setAttribute('aria-pressed', 'false');
    } else {
      player.play();
      button.textContent = '⏸️';
      button.setAttribute('aria-label', 'Pause video');
      button.setAttribute('aria-pressed', 'true');
    }
    isPlaying = !isPlaying;
  });
</script>