[READ-ONLY] Mirror of https://github.com/improsocial/impro
An extensible Bluesky client for web
impro.social
Pause youtube videos on page transition
Grace Kind
(Jul 10, 2026, 8:18 PM -0500)
27efc7db
cfe28971
+59
-3
+1
-1
package.json
+1
-1
package.json
+1
src/js/components/streaming-video.js
+1
src/js/components/streaming-video.js
+17
-1
src/js/components/youtube-embed.js
+17
-1
src/js/components/youtube-embed.js
···
6
6
const DEFAULT_ASPECT_RATIO = String(16 / 9);
7
7
8
8
class YoutubeEmbed extends Component {
9
+
// Pause on navigate
10
+
handlePageTransition = () => {
11
+
if (!this.playing) {
12
+
return;
13
+
}
14
+
this.querySelector("iframe")?.contentWindow?.postMessage(
15
+
JSON.stringify({ event: "command", func: "pauseVideo", args: [] }),
16
+
"https://www.youtube-nocookie.com",
17
+
);
18
+
};
19
+
9
20
connectedCallback() {
21
+
window.addEventListener("page-transition", this.handlePageTransition);
10
22
if (this._initialized) {
11
23
return;
12
24
}
···
23
35
this._initialized = true;
24
36
}
25
37
38
+
disconnectedCallback() {
39
+
window.removeEventListener("page-transition", this.handlePageTransition);
40
+
}
41
+
26
42
getPlayerSrc() {
27
43
const startSeconds = /^\d+$/.test(this.start ?? "") ? this.start : "0";
28
44
return `${YOUTUBE_EMBED_BASE_URL}/${encodeURIComponent(
29
45
this.videoId,
30
-
)}?autoplay=1&start=${startSeconds}&rel=0&playsinline=1`;
46
+
)}?autoplay=1&start=${startSeconds}&rel=0&playsinline=1&enablejsapi=1&origin=${encodeURIComponent(window.location.origin)}`;
31
47
}
32
48
33
49
play() {
+40
-1
tests/unit/specs/components/youtube-embed.test.js
+40
-1
tests/unit/specs/components/youtube-embed.test.js
···
105
105
assert(iframe !== null);
106
106
assertEquals(
107
107
iframe.getAttribute("src"),
108
-
"https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?autoplay=1&start=32&rel=0&playsinline=1",
108
+
`https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?autoplay=1&start=32&rel=0&playsinline=1&enablejsapi=1&origin=${encodeURIComponent(window.location.origin)}`,
109
109
);
110
110
assertEquals(element.dataset.teststate, "playing");
111
111
assert(element.classList.contains("is-playing"));
···
153
153
"[data-testid='youtube-embed-iframe']",
154
154
);
155
155
assert(iframe.getAttribute("src").includes("start=0"));
156
+
});
157
+
});
158
+
159
+
t.describe("YoutubeEmbed - page transitions", (it) => {
160
+
function capturePostedMessages(element) {
161
+
const messages = [];
162
+
const iframe = element.querySelector("iframe");
163
+
iframe.contentWindow.postMessage = (message, targetOrigin) => {
164
+
messages.push({ message, targetOrigin });
165
+
};
166
+
return messages;
167
+
}
168
+
169
+
it("sends a pauseVideo command to the player on page-transition", () => {
170
+
const element = createEmbed();
171
+
getCardLink(element).click();
172
+
const messages = capturePostedMessages(element);
173
+
window.dispatchEvent(new window.CustomEvent("page-transition"));
174
+
assertEquals(messages.length, 1);
175
+
assertEquals(
176
+
messages[0].message,
177
+
JSON.stringify({ event: "command", func: "pauseVideo", args: [] }),
178
+
);
179
+
assertEquals(messages[0].targetOrigin, "https://www.youtube-nocookie.com");
180
+
});
181
+
182
+
it("does nothing on page-transition while in the preview state", () => {
183
+
const element = createEmbed();
184
+
window.dispatchEvent(new window.CustomEvent("page-transition"));
185
+
assertEquals(element.dataset.teststate, "preview");
186
+
});
187
+
188
+
it("stops listening for page-transition after being removed", () => {
189
+
const element = createEmbed();
190
+
getCardLink(element).click();
191
+
const messages = capturePostedMessages(element);
192
+
element.remove();
193
+
window.dispatchEvent(new window.CustomEvent("page-transition"));
194
+
assertEquals(messages.length, 0);
156
195
});
157
196
});
158
197