Changeset cb95343 in Klonkt

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.

Location:

src

Files:

• assets/css/embed.css (modified) (1 diff)
• assets/js/embed-player.js (modified) (2 diffs)
• views/shell.ejs (modified) (2 diffs)

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; }

src/assets/js/embed-player.js

@@ -153 +153 @@
   const LABEL = { youtube: 'YouTube', soundcloud: 'SoundCloud', spotify: 'Spotify' };
 
+  // Touch / coarse-pointer (phones, most tablets): the custom JS-mounted card is
+  // fragile — Safari tracking-protection blocks the platform API scripts AND the
+  // poster thumbnails (i.ytimg.com) → a black/blank box. Render the plain, reliable
+  // platform iframe directly instead (same approach the News feed uses). The
+  // padding-ratio wrapper reserves height on every browser incl. old iOS Safari
+  // (no `aspect-ratio` dependency). Desktop keeps the rich custom card.
+  const IS_TOUCH = !!(window.matchMedia && window.matchMedia('(hover: none) and (pointer: coarse)').matches);
+
+  function mountPlain(el, provider, ref, url) {
+    el.classList.add('pcms-embed-card', 'pcms-embed-card--' + provider, 'pcms-embed-plain');
+    el.classList.remove('pcms-embed-loading');
+    let html = '';
+    if (provider === 'youtube') {
+      const id = ytId(ref, url);
+      html = id
+        ? '<div class="pcms-embed-ratio"><iframe src="https://www.youtube-nocookie.com/embed/' + encodeURIComponent(id) + '?rel=0" title="YouTube" loading="lazy" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>'
+        : '<a class="pcms-embed-plain-link" href="' + escAttr(safeHref(url)) + '" target="_blank" rel="noopener">YouTube</a>';
+    } else if (provider === 'soundcloud') {
+      html = '<iframe class="pcms-embed-plain-frame" style="height:166px" src="https://w.soundcloud.com/player/?url=' + encodeURIComponent(ref || url) + '&color=%23ff5500&visual=false" title="SoundCloud" loading="lazy" frameborder="0" allow="autoplay" scrolling="no"></iframe>';
+    } else if (provider === 'spotify') {
+      const m = (ref || '').match(/^spotify:(\w+):(\w+)$/);
+      const src = m ? 'https://open.spotify.com/embed/' + m[1] + '/' + m[2] : (url || '');
+      html = '<iframe class="pcms-embed-plain-frame" style="height:152px" src="' + escAttr(src) + '" title="Spotify" loading="lazy" frameborder="0" allow="encrypted-media"></iframe>';
+    } else {
+      html = '<a class="pcms-embed-plain-link" href="' + escAttr(safeHref(url)) + '" target="_blank" rel="noopener">' + (LABEL[provider] || provider) + '</a>';
+    }
+    el.innerHTML = html;
+  }
+
   // ============================================================
   // 3. Card controller — builds the on-brand card + delegates to an adapter
@@ -161 +190 @@
     const url = el.dataset.embedUrl || '';
     if (!provider) return;
+    if (IS_TOUCH) { mountPlain(el, provider, ref, url); return; }
 
     el.classList.add('pcms-embed-card', 'pcms-embed-card--' + provider);

src/views/shell.ejs

@@ -252 +252 @@
 <link rel="stylesheet" href="/assets/css/audio.css?v=11">
 <!-- Eigen custom media-embeds (YouTube/SoundCloud/Spotify) in huisstijl. -->
-<link rel="stylesheet" href="/assets/css/embed.css?v=8">
+<link rel="stylesheet" href="/assets/css/embed.css?v=9">
 
 <%- include('partials/shared-styles') %>
@@ -385 +385 @@
 <!-- Eigen custom media-embeds (YouTube/SoundCloud/Spotify) via de echte
      player-API's + gedeelde mutual-exclusion registry met de site-speler. -->
-<script src="/assets/js/embed-player.js?v=16" defer></script>
+<script src="/assets/js/embed-player.js?v=17" defer></script>
 <% if (site && site.enable_audio_player && audioTracks && audioTracks.length > 0) { %>
   <script>window.PCMS_SITE_TRACKS = <%- JSON.stringify(audioTracks) %>;</script>