Embedded iframe YouTube video fullscreen not working

[Taehoon Lee]

I have iframe embedded YouTube videos on my extension's popup, but fullscreen button within the YouTube video does not seem to work. Is fullscreen mode not supported on extension popups?

[Stefan vd]

Hi Taehoon,

Is your code something like this:

<iframe id="ytplayer" type="text/html" width="400" height="225"
src="https://www.youtube.com/watch?v=0Y8oEKK1Iy8"
frameborder="0" allowfullscreen></iframe>

With the "allowfullscreen" in the iframe element?

Regards,

Stefan

Developer

[Stefan vd]

Hi Taehoon,

You can example inject the video content on the web page (when you click on the extension button). And show the content as a dialog on top of that website, with an own X to close the dialog.

Example:

In my Ambient Aurea Chrome extension, I add a layer on top with a mini preview of images on that web page. And if the user wants back his normal view of the website, they can click on the black translucent background or on the extension button.

https://chrome.google.com/webstore/detail/ambient-aurea/pkaglmndhfgdaiaccjglghcbnfinfffa

Regards,

Stefan

Developer

Hi Stefan,
Yes. I actually figured out how make the fullscreen button show up. However, it seems like clicking the fullscreen button within YouTube video element makes the popup go out of focus and exits the video automatically. Is there a way to play the video even when the popup is destroyed?
Taehoon

[Stefan vd]

Hi Taehoon,

A popup is not designed to keep it always open, only with a click outside the popup frame It will always close this frame.

Other tips you can try:

- Forward the YouTube video in your "background.html" page, and create a "fake" fullscreen button in the popup.

- Create a hidden window behind.

Regards,

Stefan

Developer

Hi Stefan,
That's similar to the approach I was thinking. So currently, there's no way for the fullscreen button inside an embedded youtube to work naturally using <iframe> or <object> tags?
Thanks,
Taehoon

[Stefan vd]

Hi Taehoon,

Additionally, is there a security risk behind including Public API Key for browser applications that you get from Google Developer Console credentials? I immediately assumed that "public" means it is safe to publish it on public repositories and javascript files.

Public is safe for users (but doesn't share or include your private key in the extension).

https://developers.google.com/console/help/

Regards,

Stefan

Developer

 

Hi Stefan,
I've tried embedding the video in "background.html" and display it on "popup.html" via javascript. Since "background.html" is not for display, this approach did not work for me. However, I was able to persist the video's audio. For now, I am fine with displaying the video on fullscreen on a new tab.
Additionally, is there a security risk behind including Public API Key for browser applications that you get from Google Developer Console credentials? I immediately assumed that "public" means it is safe to publish it on public repositories and javascript files.

Thank you for your help!
Taehoon