@escape-game-over/atlas 0.1.85 → 0.1.86

package/docs/client-scripts.md

@@ -521,6 +521,12 @@ is what every embed needs and has no taste in:
 - **Focus moves to the player.** The button that had it has just left the page,
   which would drop a keyboard reader back at the top of the document.
 
+Two choices stay with the project. `rel` lets the player suggest videos from
+other channels, and is off by default, so `rel=0` keeps the suggestions to the
+channel's own; YouTube has no setting that removes them altogether. `playsInline`
+keeps the video in the page on an iPhone rather than going full screen on the
+press.
+
 `frame` is called after all of that and before the iframe is in the page, so its
 word is the last one and nothing is drawn unstyled first.
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@escape-game-over/atlas",
-    "version": "0.1.85",
+    "version": "0.1.86",
     "type": "module",
     "description": "Typed, data-driven machinery for static multi-locale, multi-deployment Astro sites.",
     "private": false,

package/src/astro/youtube.ts

@@ -55,6 +55,19 @@ export interface YouTubeEmbedOptions {
      * player has no way to tell which video it is.
      */
     readonly title: string;
+    /**
+     * Whether the player may suggest videos from other channels. Off unless
+     * asked for: with `rel=0` it suggests only the channel's own, so a trailer
+     * on a project's page does not end on someone else's video.
+     *
+     * YouTube has no setting that removes the suggestions altogether.
+     */
+    readonly rel?: boolean;
+    /**
+     * Whether an iPhone plays the video in the page rather than taking it
+     * full screen on the press.
+     */
+    readonly playsInline?: boolean;
     /**
      * Anything the project wants on the iframe — classes, above all.
      *
@@ -106,7 +119,7 @@ const ALLOW =
     "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share";
 
 export function youtubeEmbed(options: YouTubeEmbedOptions): YouTubeEmbed {
-    const { id, title, frame } = options;
+    const { id, title, rel = false, playsInline = false, frame } = options;
 
     if (!VIDEO_ID.test(id)) {
         throw new Error(
@@ -122,7 +135,10 @@ export function youtubeEmbed(options: YouTubeEmbedOptions): YouTubeEmbed {
     // `youtube-nocookie.com` rather than `youtube.com`: the same player, which
     // sets no cookie until the video is played — and here it is only ever
     // loaded to be played, so nothing is lost by it.
-    const src = `https://www.youtube-nocookie.com/embed/${id}?autoplay=1`;
+    const url = new URL(`https://www.youtube-nocookie.com/embed/${id}`);
+    url.searchParams.set("autoplay", "1");
+    url.searchParams.set("rel", rel ? "1" : "0");
+    if (playsInline) url.searchParams.set("playsinline", "1");
 
     return {
         attach(trigger, container) {
@@ -133,7 +149,7 @@ export function youtubeEmbed(options: YouTubeEmbedOptions): YouTubeEmbed {
                 () => {
                     const iframe =
                         container.ownerDocument.createElement("iframe");
-                    iframe.src = src;
+                    iframe.src = url.href;
                     iframe.title = title;
                     iframe.allow = ALLOW;
                     iframe.allowFullscreen = true;