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-vimeo videoid="375468729" videotitle="Really Important Video" autoload="true"></lite-vimeo>
/* 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-vimeo videoid="{{ vimeoID }}" videotitle="{{ title }}" autoload="true"></lite-vimeo>