fix: don't autoplay videos in waves feed#965
Conversation
Waves and thread feeds render video embeds inline (embedVideosDirectly) instead of behind a click-to-play overlay. The inline 3Speak and YouTube players were starting playback automatically, so scrolling a feed could leave several videos playing at once, which is disorienting. When embedVideosDirectly is set, load the players paused: - YouTube: drop ?autoplay=1 from the iframe src and remove the autoplay permission from the allow attribute. - 3Speak: request autoplay=false explicitly (the player autoplays by default), both for link embeds (a.method) and raw iframe embeds (iframe.method, now passed renderOptions via traverse). The click-to-play path used everywhere else is unchanged: data-embed-src still carries autoplay so playback starts after the user clicks.
Greptile SummaryThis PR fixes video autoplay in the Waves/thread feed by ensuring that YouTube and 3Speak embeds rendered inline (
Confidence Score: 5/5Safe to merge — the changes are narrowly scoped to the embedVideosDirectly code path, the click-to-play path is untouched, and the previously-reported edge case (pre-baked autoplay=true in a raw iframe src) is now properly handled with a regex replace and covered by a dedicated regression test. The fix correctly suppresses autoplay across all three embed paths (YouTube via a.method, 3Speak via a.method, 3Speak raw iframes via iframe.method). The one subtle edge case — a raw iframe whose src already contains autoplay=true — is addressed by the regex substitution and verified by the new override test. The non-waves click-to-play path is unchanged. No logic errors or missing guards were found. No files require special attention. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[traverse node] --> B{node type?}
B -->|anchor tag| C[a.method]
B -->|iframe tag| D[iframe.method\nnow receives renderOptions]
C --> E{embedVideosDirectly?}
E -->|Yes - waves feed| F{platform?}
E -->|No - post/entry| G[set data-embed-src\nwith autoplay\nclick-to-play overlay]
F -->|YouTube| H[directSrc: embed/ID\nno autoplay=1\nno autoplay in allow]
F -->|3Speak| I[directSrc: videoHref\n+ autoplay=false]
D --> J{3Speak src?}
J -->|Yes| K{embedVideosDirectly?}
K -->|Yes| L{hasAutoplay?}
L -->|autoplay present| M[regex replace\nautoplay=false]
L -->|autoplay absent| N[append autoplay=false]
K -->|No| O[append autoplay=true\nif absent]
%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
A[traverse node] --> B{node type?}
B -->|anchor tag| C[a.method]
B -->|iframe tag| D[iframe.method\nnow receives renderOptions]
C --> E{embedVideosDirectly?}
E -->|Yes - waves feed| F{platform?}
E -->|No - post/entry| G[set data-embed-src\nwith autoplay\nclick-to-play overlay]
F -->|YouTube| H[directSrc: embed/ID\nno autoplay=1\nno autoplay in allow]
F -->|3Speak| I[directSrc: videoHref\n+ autoplay=false]
D --> J{3Speak src?}
J -->|Yes| K{embedVideosDirectly?}
K -->|Yes| L{hasAutoplay?}
L -->|autoplay present| M[regex replace\nautoplay=false]
L -->|autoplay absent| N[append autoplay=false]
K -->|No| O[append autoplay=true\nif absent]
Reviews (3): Last reviewed commit: "chore: apply changeset versioning for PR..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (6)
📒 Files selected for processing (4)
📝 WalkthroughWalkthroughYouTube and 3Speak embed handlers are updated so that the ChangesDisable autoplay in embedVideosDirectly mode
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
packages/render-helper/src/methods/iframe.method.spec.tsOops! Something went wrong! :( ESLint: 8.57.1 YAMLException: Cannot read config file: /packages/render-helper/eslint.config.mjs 19 | packages/render-helper/src/methods/iframe.method.tsOops! Something went wrong! :( ESLint: 8.57.1 YAMLException: Cannot read config file: /packages/render-helper/eslint.config.mjs 19 | Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Address review: the previous embedVideosDirectly guard in iframe.method only applied when the src had no autoplay param. A raw 3Speak <iframe> that already carried autoplay=true (e.g. .../embed?v=foo&autoplay=true) short-circuited the guard and still autoplayed in the waves feed. Now, under embedVideosDirectly, force autoplay=false even when one is already present (overwrite via regex); elsewhere keep adding autoplay=true only when absent so an author-supplied value is preserved. Adds a regression test for the baked-in autoplay=true case.
1 participant
Problem
A user reported that videos (3Speak, and other embeds) on the Waves page autoplay, which is confusing, especially when scrolling past several at once.
Root cause
Waves and thread feeds render video embeds inline via
renderOptions.embedVideosDirectly(set inwaves-list-itemandwave-view-details) instead of behind the usual click-to-play overlay. The directly-embedded players were requesting autoplay:src=.../embed/<id>?autoplay=1and anallowattribute that includedautoplay.a.methodnor the raw-iframe path iniframe.method).Fix
Only when
embedVideosDirectlyis set (i.e. the waves/thread feed), load players paused:a.method): inline iframe src is now.../embed/<id>(noautoplay=1) and theautoplaypermission is removed fromallow.a.method): inline iframe src now requestsautoplay=falseexplicitly.iframe.method):renderOptionsis now threaded throughtraverse, so raw<iframe>embeds in a wave body also default toautoplay=false.The click-to-play path used everywhere else (post/entry pages) is unchanged:
data-embed-srcstill carries autoplay, so playback starts right after the user clicks the overlay.Tests
a.method.spec.ts(YouTube + 3Speak waves embeds verify no autoplay in the iframe src, whiledata-embed-srckeeps autoplay for click-to-play).iframe.method.spec.ts(raw 3Speak iframe defaults toautoplay=falseunderembedVideosDirectly).Summary by CodeRabbit
Bug Fixes
autoplay=truesetting.Tests
autoplay=true.Chores