Embed

1. Example & HTML Structure

<figure class="bt1d-embed is-provider-youtube">
  <div class="bt1d-embed__wrapper">
    <!--Embed Code Start-->
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Ibn1wXI0VT8?si=AS0ouUbM5viNwz1V" 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>
    <!--Embed Code End-->
  </div>
</figure>

<figure class="bt1d-embed is-provider-vimeo">
  <div class="bt1d-embed__wrapper">
    <!--Embed Code Start-->
    <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/353385939?h=d0fd7f4488&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Back to School with T1D"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
    <!--Embed Code End-->
  </div>
</figure>

2. Usage

To use the Embed component, copy the iframe embed code from the video platform (YouTube or Vimeo) and wrap it within the provided HTML structure. The JavaScript in the package ensures that the video displays properly, with the correct aspect ratio and additional features for YouTube videos.

3. Key Classes

• bt1d-embed: The main wrapper that contains the video embed.
• is-provider-youtube: This class is applied when embedding a YouTube video.
• is-provider-vimeo: This class is applied when embedding a Vimeo video.
• bt1d-embed__wrapper: The inner wrapper that ensures the iframe scales properly and maintains the correct aspect ratio.

4. JavaScript Enhancements

The Embed Component includes JavaScript that enhances the functionality of embedded videos. The script ensures that each video has the correct aspect ratio and, in the case of YouTube videos, automatically adds a thumbnail as the background along with a custom play button.

Main JavaScript Features:

• Aspect Ratio Calculation: The JavaScript calculates the aspect ratio of the video based on the iframe’s width and height, ensuring that the video maintains its proper dimensions across devices.
• YouTube-Specific Enhancements:
  • Thumbnail Background: The script sets a thumbnail from YouTube as the background of the video until the play button is clicked.
  • Play Button: A custom play button is added over the video thumbnail to trigger playback.
• Play Video on Click: Clicking either the play button or the video wrapper will play the video and automatically hide the thumbnail.