-
Notifications
You must be signed in to change notification settings - Fork 143
Open
Description
Bug Report
Describe the bug
The YouTube video in the docs does not autoplay when it becomes visible. The iframe uses an autoPlay attribute (ignored by YouTube) and the embed URL lacks the required params. Most browsers only allow autoplay when muted.
- Affected file:
next-cloudinary/docs/components/Video/Video.js - Affected page:
/cldimage/basic-usage→ “Watch & Learn” section
Is this a regression?
No
Steps To Reproduce the error
- Run the docs app:
cd next-cloudinary/docs && pnpm dev - Visit http://localhost:3000/cldimage/basic-usage
- Scroll to “Watch & Learn”
- Observe the video does not autoplay
Expected behaviour
The video should autoplay once it becomes visible (muted to satisfy browser policies).
Screenshot or Video Recording
Suggested fix
- Add
autoplay=1,mute=1, andplaysinline=1to the YouTube embed URL. - Remove the ineffective
autoPlayattribute on theiframeelement.
Proposed change:
--- a/next-cloudinary/docs/components/Video/Video.js
+++ b/next-cloudinary/docs/components/Video/Video.js
@@ -56,13 +56,12 @@ export const Video = ({
>
<iframe
title={title}
width={width}
height={height}
- src={`https://www.youtube.com/embed/${videoId}?feature=oembed`}
+ src={`https://www.youtube.com/embed/${videoId}?feature=oembed&autoplay=1&mute=1&playsinline=1`}
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
- autoPlay
/>
</div>
) : (Your environment
- OS: macOS
- Node: 18/20
- Package manager: pnpm
- Browser: Chrome/Edge/Safari (desktop and mobile)
Additional context
YouTube ignores autoPlay HTML attribute on iframes; autoplay must be requested via URL parameters and typically requires the video to be muted for autoplay to be allowed by modern browser policies.
Metadata
Metadata
Assignees
Labels
No labels