Performant Accessible Video Embedding with youtube-vimeo-embed

youtube-vimeo-embed is a Custom Element that provides a performance- and privacy-focused approach to Youtube/Vimeo video embedding.

It can enhance page load speed by fetching and displaying video thumbnails initially and loading full videos only when necessary.

youtube-vimeo-embed is fully accessible and adheres to WCAG 2.2 Level AA standards. If the script fails to load, the video link is retained to provide a fallback mechanism for video access.

In addition, the use of the ‘youtube-nocookie.com’ domain for YouTube videos enhances user privacy by avoiding immediate tracker loading.

How to use it:

1. Download and load the YouTubeVimeoEmbed.js script in your HTML document:

<script src="YouTubeVimeoEmbed.js"></script>

2. Wrap your YouTube or Vimeo video links with the <youtube-vimeo-embed> Custom Element as shown below:

<youtube-vimeo-embed>
  <p>
    <a href="https://youtu.be/VIDEO-ID">Video Title</a>
  </p>
</youtube-vimeo-embed>

<youtube-vimeo-embed>
  <p>
    <a href="https://vimeo.com/VIDEO-ID">Video Title</a>
  </p>
</youtube-vimeo-embed>

3. Use the data-ratio attribute to set the desired aspect ratio for the embedded video:

<youtube-vimeo-embed data-ratio="1/1">
  <p>
    <a href="https://vimeo.com/VIDEO-ID">Video Title</a>
  </p>
</youtube-vimeo-embed>

4. Replace the default YouTube/Vimeo thumbnail with your own poster image using the data-poster attribute:

<youtube-vimeo-embed data-poster="/path/to/poster.jpg">
  <p>
    <a href="https://vimeo.com/VIDEO-ID">Video Title</a>
  </p>
</youtube-vimeo-embed>

5. Specify the exact video start time in seconds using the start query parameter in the link:

<youtube-vimeo-embed>
  <p>
    <a href="https://youtu.be/VIDEO-ID?start=28">Video Title</a>
  </p>
</youtube-vimeo-embed>