Day 11: Video embed 📺

A video embed is a code snippet that allows us to embed the video from a third-party platform like YouTube or Video to our site.

The example component is visible below.

A few notes about this video embed component:

• CSS Variables are used for colors,
• the aspect-ratio property (which is supported in all modern devices now 🎆) is used instead of the “padding hack”,
• the loading="lazy" attribute is used to notify the browser to download the iframe when the user scrolls near the component.

The code:

<iframe class="advent-video" width="560" height="315" src="https://www.youtube.com/embed/sdUUx5FdySs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe>
<style>

.advent-video {
  --color-xmas-alpha: #f7efef;
  background-color: var(--color-xmas-alpha);
  min-width: 100%;
  height: auto;
  aspect-ratio: 560 / 315;
  border: 1px solid var(--color-xmas-beta);
}