appsmithorg / appsmith

Platform to build admin panels, internal tools, and dashboards. Integrates with 25+ databases and any API.
https://www.appsmith.com
Apache License 2.0
34.74k stars 3.76k forks source link

[Bug]:How to play YouTube videos inside custom widgets #33846

Open satpalslabs opened 6 months ago

satpalslabs commented 6 months ago

I am trying to embed YouTube videos inside custom widgets using iframes and video js library.

Steps To Reproduce

  1. Created a custom widget.
  2. Embedded a YouTube video using the video JS library.
<div className="h-[200px] w-full">
     <video-js d="player1" className="video-js min-w-full"
         allow="autoplay" preload="auto">
           <source src={item.url} type="video/youtube" />
      </video-js>
 </div>

OR

  1. Create a custom widget
  2. Embed a YouTube video inside an iframe tag.
<div className="h-[200px] w-full">
    <iframe className="min-w-full h-full" src="https://www.youtube.com/embed/E9eKchgS-Gk" title="1:2:2 Knowledge - The How And Why Of Asthma" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>

Error with both methods: YouTube videos are not playing but with the video JS library and other formats videos are working fine.
Expected Output: YouTube video should be automatically playing or should play manually on a button click.

Note: We can't use the default video widget as we also have other custom implementations.

Public Sample App

No response

Environment

Production

Severity

High (Blocker to building or releasing)

Issue video log

No response

Version

Cloud

raushan3737 commented 4 months ago

Hi team @Nikhil-Nandagopal @pranavkanade ,

I have been able to reproduce the issue with YouTube videos not playing correctly inside the custom widget in the production environment. Unfortunately, I have not been able to replicate the issue in my local setup.

I am interested in investigating and resolving this bug. Could you please assign this issue to me?

Snapshot:

  1. Production Environment: image

  2. Local Environment: image

Nikhil-Nandagopal commented 4 months ago

@raushan3737 if it's working on your local setup then the issue is likely with the configurations of the environment where it is hosted and so you won't be able to really debug and solve this issue.