THE MEDIA
SLOT TAKES
ANY EMBED
A YouTube <iframe>, not an <img>or <video>, following the -media-aspect-ratio which defaults at 16 / 9. Over the video sits a simple -media-after-background gradient. The player's own controls stay fully clickable underneath it.
Code
<style>
.real-embed-hero {
--steam-block-hero-align-items: flex-end;
--steam-block-content-text-align: right;
--steam-block-media-border-radius: 1rem;
--steam-block-media-after-background: linear-gradient(to top, rgba(0, 0, 0, .8) 20%, transparent 65%);
}
</style>
<steam-block class="real-embed-hero" type="hero">
<iframe slot="media" src="https://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe>
<div slot="content"><h1>The media slot takes any embed</h1></div>
</steam-block>