Responsive-friendly oembed?

[BrendonKoz]

I just started thinking about OEmbeds (PW example 1, example 2) and how best to style them so that they appear responsively. Unfortunately, since there are so many various types of embeds, I can't really think of how best to responsively style them in a generalized way, if it's even possible at all. At the moment I'm only using Neue Rituale's fieldtype, if it matters, and thus far only embedding YouTube videos. By default, their embed/render size is quite small. I was able to successfully make them responsive using a little CSS trickery so that it retains its original proportional ratio and fills whatever container space is available to it. I'll likely add in a max-width at some point. However, using a similar technique on an embed that is intended to be tall/thin-width would be unlikely to work out quite as well.

Has anyone attempted this feat successfully?

For sharing purposes, here is the solution I'm currently using to make the oembed responsive:

PW Template:

<div class="oembed" style="--aspect-ratio: <?= $page->oembed->width ?>/<?= $page->oembed->height ?>;">
	<?= $page->oembed ?>
</div>

Vanilla CSS (framework agnostic):

/* https://css-tricks.com/responsive-iframes/ */
.oembed[style*="--aspect-ratio"] > :first-child {
    width: 100%;
}
.oembed[style*="--aspect-ratio"] > img {
    height: auto;
}
.oembed[style*="--aspect-ratio"] {
    position: relative;
}
.oembed[style*="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
}
.oembed[style*="--aspect-ratio"] > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

 

[monollonom]

I'm only dealing with video, but this is the latest I used:

<?php

// greatest common divisor
function gcd($a, $b) {
	return $b ? gcd($b, $a % $b) : $a;
}

$padding = $video->height / $video->width * 100;
$padding = str_replace(",", ".", $padding); // css doesn’t like commas

$ratio = gcd($video->width, $video->height);
$ratio = $video->width / $ratio . " / " . $video->height / $ratio;

echo "<div class='video' style='aspect-ratio:$ratio; padding-top:$padding%;'>$video->html</div>";

CSS:

.video {
	aspect-ratio: 16 / 9;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	padding-top: 56.25%;
}

.video > iframe {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

/* if aspect-ratio is supported */
@supports (aspect-ratio: 16/9) {
	.video {
		padding-top: 0 !important;
	}

	.video > iframe {
		position: static;
	}
}

Constraining things in the y-axis has always been one of my biggest pain in CSS... but aspect-ratio goes in the right direction in that you can just go ahead and set the max-width/height to 100% and it will adapt nicely within its parent Wait actually some testing goes against what I just wrote, I have to test further 🫣 It does work but as always with CSS there will be weird edge cases. I wasn't using it much before but now the support is quite reasonnable.