Web component that renders YouTube and Vimeo embeds faster. We utilize @justinribeiro/lite-youtube and @slightlyoff/lite-vimeo to accomplish this task.
This web component can be used inside WYSIWYG boxes, but is also utilized by larger components like the Call to Action - Media.
<lite-youtube videotitle="Really Important Video" videoid="dQw4w9WgXcQ" nocookie="true" autoload="true">
<a class="lite-youtube-fallback" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Really Important Video"</a>
</lite-youtube>
/* components/02-components/05-video-embed/video-embed.scss */
/* BEGIN video-embed.scss */
.lite-youtube-fallback {
aspect-ratio: 16 / 9; /* matches YouTube player */
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 1em;
padding: 1em;
background-color: #000;
color: #fff;
text-decoration: none;
}
/* right-facing triangle "Play" icon */
.lite-youtube-fallback::before {
display: block;
content: '';
border: solid transparent;
border-width: 2em 0 2em 3em;
border-left-color: red;
}
.lite-youtube-fallback:hover::before {
border-left-color: #fff;
}
.lite-youtube-fallback:focus {
outline: 2px solid red;
}
/* END profile-card.scss */
<lite-youtube videotitle="{{ title }}" videoid="{{ youtubeID }}" nocookie="true" autoload="true">
<a class="lite-youtube-fallback" href="https://www.youtube.com/watch?v={{ youtubeID }}">{{ title }}"</a>
</lite-youtube>