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-ratioproperty (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);
}