Embeds on Socle

Overview

Mon, 01 Jan 0001 00:00:00 +0000

Three containers, all built on the same idea: hold the space before the content arrives.

Page	Class	For
Embed	`.embed`	Third-party iframes, players, social cards
Video	`.video`	A native `<video>`, with an optional pause control
Map	`.map`	A Leaflet map container

They all reserve an aspect ratio

An iframe, a video or a map that sizes itself once its content loads pushes the rest of the page down at an unpredictable moment. Each of these components declares aspect-ratio from a token, so the box exists at its final size from the first paint.

Embed

Mon, 01 Jan 0001 00:00:00 +0000

A responsive container for third-party embeds, holding an aspect ratio so the page does not reflow once the iframe loads.

<div class="embed">
 <iframe src="https://..." title="Video title" allowfullscreen></iframe>
</div>

Accepts iframe, video, embed or object as its child, each stretched to fill the box.

The ratio

--embed-ratio defaults to the video ratio token. Override it per instance for a square or portrait embed:

<div class="embed" style="--embed-ratio: 1">...</div>

or per context, which is usually better:

.podcast-player { --embed-ratio: 4 / 1; }

Frame and shadow

--embed-border, --embed-border-radius and --embed-box-shadow are the three decoration tokens. overflow: hidden is what lets the radius clip the iframe at the corners, since an iframe cannot be given one of its own.

Video

Mon, 01 Jan 0001 00:00:00 +0000

A wrapper for a native <video>, as opposed to an embedded player.

<div class="video">
 <video autoplay muted loop playsinline></video>
 <button class="btn btn-toggle-video is-playing" aria-label="Pause">
 <span class="icon-pause"></span>
 <span class="icon-play"></span>
 </button>
</div>

What it does

Three things:

.video {
 position: relative;

 video { aspect-ratio: var(--video-ratio, var(--ratio-video)); object-fit: var(--video-fit, contain); width: 100%; }

 .btn-toggle-video { position: absolute; inset-block-end: 0; inset-inline-end: 0; z-index: 10; }
}

It establishes the positioning context, sizes the video to its container at a known ratio, and pins the control to the bottom inline-end corner. The ratio falls back to --ratio-video from the design tokens, so --video-ratio only needs setting for a portrait or square clip.

Map

Mon, 01 Jan 0001 00:00:00 +0000

A map container, driven by Leaflet through a js-map hook.

<div class="map js-map"
 data-markers="[...]"
 data-zoom="12"
 data-tile="3"
 data-marker-hidden="false"></div>

Attribute	Role
`data-markers`	The markers to plot
`data-zoom`	Initial zoom level
`data-tile`	Tile layer selection
`data-marker-hidden`	Whether markers start hidden

This package provides the container only: ratio, background, radius and margins. Leaflet itself, its stylesheet and the script reading those attributes are yours to supply.

It breaks out on mobile

@media not (--sm) {
 --map-ratio: var(--map-ratio-mobile);

 .container & { margin-inline: calc(-1 * var(--gutter)); }
 .row { display: block; }
}

Three changes below 768px. The ratio switches to --map-ratio-mobile, usually taller, because a wide map on a narrow screen shows almost nothing useful. Inside a .container the map pulls out to the screen edges by one gutter. And a .row inside it stops laying out in columns.