Changeset cb95343 in Klonkt for src/assets/css/embed.css

Timestamp:

06/27/2026 08:30:29 AM (2 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

a3e0746

Parents:

9e4e4ff

Message:

fix(embeds): plain responsive iframe on mobile/touch

The custom JS-mounted player cards need the platform API + an i.ytimg.com poster, both
of which mobile Safari tracking-protection blocks → a blank/black box. On touch / coarse-
pointer devices, render the plain platform iframe directly (YouTube/SoundCloud/Spotify),
using a padding-ratio wrapper that reserves height on every browser incl. old iOS Safari.
Desktop keeps the rich card. embed.css v9, embed-player.js v17.

File:

• src/assets/css/embed.css (modified) (1 diff)

src/assets/css/embed.css

@@ -275 +275 @@
 .pcms-embed-pp,
 .pcms-embed-poster { -webkit-tap-highlight-color: transparent; }
+
+/* ---- Mobile / touch: plain platform iframe instead of the JS-mounted card.
+   padding-ratio reserves height on every browser (incl. old iOS Safari). ---- */
+.pcms-embed-plain { background: transparent; box-shadow: none; }
+.pcms-embed-ratio { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; }
+.pcms-embed-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 10px; }
+.pcms-embed-plain-frame { width: 100%; border: 0; display: block; border-radius: 10px; }
+.pcms-embed-plain-link { display: inline-block; padding: .5rem .9rem; }