PORTRAIT VIDEO,
KEPT PORTRAIT
Cropping a vertical video (here from Vimeo) into a 16:9 hero band throws most of it away. type="split" instead gives it its own narrow column at its real aspect ratio, an <iframe>has no natural intrinsic ratio the way <img>/<video> do, so this one sets --steam-block-media-aspect-ratio: 9 / 16;...
Code
<style>
.real-embed-split {
--steam-block-media-aspect-ratio: 9 / 16;
--steam-block-media-width: 38%;
--steam-block-content-width: 62%;
--steam-block-content-padding: 5vw;
--steam-block-content-before-background: white;
--steam-block-content-before-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FF0066' d='M46.5,-70.2C57.3,-65.5,60.9,-47.5,64.8,-31.7C68.7,-16,72.8,-2.4,69.7,9.1C66.6,20.6,56.3,30.2,46.4,38.3C36.5,46.4,27,53,15.9,58.1C4.8,63.1,-7.9,66.7,-21.9,66.3C-35.9,66,-51.2,61.8,-56.9,51.4C-62.5,41,-58.5,24.4,-61.4,8.4C-64.3,-7.5,-74,-22.9,-70.9,-33.5C-67.8,-44,-51.7,-49.7,-37.7,-52.9C-23.7,-56.2,-11.9,-56.9,3,-61.6C17.9,-66.3,35.8,-74.9,46.5,-70.2Z' transform='translate(100 100) scale(1.35)' /%3E%3C/svg%3E");
--steam-block-content-margin: 0 0 0 -15vw;
--steam-block-media-border-radius: .75rem;
}
</style>
<steam-block class="real-embed-split" order="flip">
<iframe slot="media" src="https://player.vimeo.com/video/VIDEO_ID?background=1" allowfullscreen></iframe>
<div slot="content"><h1>Portrait video, kept portrait</h1></div>
</steam-block>