Media block HTML and CSS · Bynder for Strapi

The HTML the editor saves for video and audio blocks and the CSS classes to style them.

HTML

<figure class="bynder-media bynder-media--video bynder-media--size-md bynder-media--align-center bynder-media--ratio-16-9">
  <video src="https://…" poster="https://…" controls preload="metadata"></video>
  <figcaption>Optional caption</figcaption>
</figure>

For audio the figure has bynder-media--audio and holds an <audio controls preload="metadata">. A silent-loop video has muted loop playsinline autoplay and no controls.

Classes

Class	Meaning
`bynder-media`	Every media block
`bynder-media--video`, `bynder-media--audio`	The kind of block
`bynder-media--size-sm`, `-md`, `-lg`, `-full`	Size
`bynder-media--align-start`, `-center`, `-end`	Alignment
`bynder-media--ratio-auto`, `-16-9`, `-4-3`, `-1-1`, `-9-16`	Aspect ratio (video only)

CSS

The classes carry no styling by themselves. Copy this stylesheet as a starting point, or write your own:

figure.bynder-media { margin: 1.5rem 0; max-width: 100%; }
.bynder-media--size-sm { width: min(20rem, 100%); }
.bynder-media--size-md { width: min(32rem, 100%); }
.bynder-media--size-lg { width: min(48rem, 100%); }
.bynder-media--size-full { width: 100%; }
.bynder-media--align-start { margin-inline: 0 auto; }
.bynder-media--align-center { margin-inline: auto; }
.bynder-media--align-end { margin-inline: auto 0; }
.bynder-media video, .bynder-media audio { display: block; width: 100%; }
.bynder-media--ratio-16-9 video { aspect-ratio: 16 / 9; object-fit: cover; }
.bynder-media figcaption:empty { display: none; }

If your article text has its own figure margin rule, make these selectors more specific so alignment is not overridden.