Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[@next/third-parties] Youtube Embed missing muted option for autoplay parameter #77447

Open
Kief5555 opened this issue Mar 24, 2025 · 3 comments · May be fixed by #77485
Open

[@next/third-parties] Youtube Embed missing muted option for autoplay parameter #77447

Kief5555 opened this issue Mar 24, 2025 · 3 comments · May be fixed by #77485

Comments

@Kief5555
Copy link

Kief5555 commented Mar 24, 2025

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/async-star-46kklw

To Reproduce

  1. Create a react project
  2. Install @next/third-parties
  3. Import the YoutubeEmbed from @next/third-parties/google
  4. Use the component and make sure to add params="autoplay=1"
  5. Observe that autoplay doesn't work because most browsers require the <video> or <iframe> that third-parties is using under the hood to have the muted=true property.

Current vs. Expected behavior

I expected my video to autoplay

But, it didn't autoplay because there was no way to mute the video using muted (param doesn't exist)

Provide environment information

Binaries:
  Node: 20.9.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 15.3.0-canary.20 // Latest available version is detected (15.3.0-canary.20).
  eslint-config-next: N/A
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.8.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local), Other (Deployed), Vercel (Deployed)

Additional context

Should look like this:
<YouTubeEmbed videoid="" height={400} params="autoplay=1" muted/>

or if autoplay is in param, automatically mute it. (muted property isn't a feature)

The iFrame Player API from google docs does not include the option to mute. This needs to be done by <video> or <iframe> component.

Reference to nextjs docs for this library

@kimpuro
Copy link

kimpuro commented Mar 24, 2025

I don't think this issue is inherently a problem with Next.js itself.

The README of @next/third-parties states:
"The YouTubeEmbed component is used to load and display a YouTube embed. This component loads faster by using lite-youtube-embed under the hood."

Next.js uses lite-youtube-embed, and there is an open issue regarding autoplay in that library:
issues

Ultimately, lite-youtube-embed sacrifices autoplay for performance optimization.
I think this is why the autoplay feature doesn't work.

@Kief5555
Copy link
Author

Kief5555 commented Mar 24, 2025

Perhaps it's worth mentioning in the documentation of nextjs that autoplay will not work in the YoutubeEmbedand use a different example when applying the parameters

@kimpuro
Copy link

kimpuro commented Mar 24, 2025

I agree with you. The Next.js documentation states that YouTube IFrame API parameters can be used, but it does not mention that the autoplay feature does not work. Most people would assume this is a bug in Next.js because there is no indication in the documentation that lite-youtube-embed does not support autoplay. I think it would be worth creating a PR to address this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants