This provides a fast way to embed youtube videos since it loads the youtube thumbnail istead of the iframe. It loads the iframe and starts playing upong clicking the play button.
<Youtube id="EBtsu6naB8g" />
<Youtube id="EBtsu6naB8g"> <button>play</button> </Youtube>
<Youtube
id="EBtsu6naB8g"
--overlay-bg-color="{overlayBGColor}30"
--overlay-transition="all {overlayTransitionDuration}ms linear"
/>
<Youtube
id="KrSH82gg7BQ"
--title-color={titleColor}
--title-shadow-color="{titleShadowColor}30"
--title-font-family={titleFontFamily}
/>
Some videos don't have custom thumbnail, so you can use this option to set the thumbnail to the default one.
<Youtube id="EBtsu6naB8g" altThumb={true} />
You can disable animation that is displayed when the play button is clicked by passing `animations` attribute.
<Youtube id="EBtsu6naB8g" animations={false} />
Similar to how we can use custom play button, we can also use custom thumbnails.
Use slot="thumbnail" to a image/picture html tag and place it inside Yoututbe component.
<Youtube id="EBtsu6naB8g"> <img slot="thumbnail" alt="A video on svelte" src="/path/image.jpg" style="width: 100%; height: 100%; object-fit: contain; object-position: center; background: red" /> <!-- inline styles are optional --> </Youtube>