Performance-Focused Youtube/Vimeo Video Embed Component – video-player

The <video-player> web component lets you easily embed YouTube or Vimeo videos into web applications without negatively impacting page loading times. It maintains page load speed by deferring the loading of the “real” video until the user initiates playback by clicking the play button.

For example, an online learning platform can use this component to embed educational videos; the page loads rapidly with thumbnail images in place of the actual videos. When a user clicks a thumbnail, the component replaces the image with the corresponding video iframe, initiating playback.

How to use it:

1. Download the web component and import the JavaScript file:

import "./components/video-player.js";

2. Wrap your video links in the <video-player> element. You can then customize the video embed using the following HTML data attributes:

• title: Descriptive video title for accessibility.
• data-video-provider: Must be “youtube” or “vimeo”.
• data-video-id: The unique video identifier for the provider.
• data-autoplay: Optional; triggers autoplay on video load.

<!-- Youtube Video -->
<video-player
  title="Mouse-aware 3D Text Spinner in Pure CSS/CSS3"
  data-video-provider="youtube"
  data-video-id="Hel7mjLx5PE"
  data-autoplay>
  <a href="https://www.youtube.com/watch?v=Hel7mjLx5PE">
    <img
      src="/path/to/custom-cover.jpg"
      width="1024"
      height="576"
      loading="lazy"
      decoding="async"
      alt="" />
  </a>
</video-player>

<!-- Vimeo Video -->
<video-player
  title="Video: Above the Clouds - Vivien Hárshegyi"
  data-video-provider="vimeo"
  data-video-id="1002451021">
  <a href="https://vimeo.com/1002451021">
    <img
      src="/path/to/custom-cover.jpg"
      width="1024"
      height="576"
      loading="lazy"
      decoding="async"
      alt="" />
  </a>
</video-player>

3. Customize the video player in your CSS.

video-player {
  display: block;
  aspect-ratio: 16 / 9;
  background-color: black;
}
video-player > a {
  position: relative;
  display: block;
  &::before {
    --width: 60px;
    --height: 60px;
    content: "";
    position: absolute;
    inset-block-start: calc(50% - (var(--height) / 2));
    inset-inline-start: calc(50% - (var(--width) / 2));
    z-index: 2;
    width: var(--width);
    height: var(--height);
    pointer-events: none;
    background-image: url(../img/icon_play.svg);
    background-repeat: no-repeat;
    background-size: cover;
    transition: scale 0.2s ease-out;
  }
  &::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-block-end: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0;
    transition: opacity 0.2s ease-out;
  }
}
video-player > a:focus,
video-player > a:hover {
  &::before {
    scale: 1.06;
  }
  &::after {
    opacity: 0.12;
  }
}
video-player img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
video-player iframe {
  display: block;
  border: 0;
  width: 100%;
  height: 100%;
}

How It Works

The <video-player> component enhances a simple link with an image into a fully functional iframe-based video player when interacted with. Here’s how it operates:

Progressive Enhancement. Initially, the component displays a static image wrapped in a link. This ensures minimal resource usage during the initial page load.

Dynamic Iframe Loading. On interaction, the connectedCallback method triggers. This method reads the data attributes (data-video-provider and data-video-id), validates the provider, and builds an iframe dynamically.

Iframe Creation Logic. The buildIframe method constructs the iframe based on the provider and video ID. It sets appropriate attributes such as src, autoplay, and allowFullscreen.