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.

Sign up for GitHub

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

Jump to bottom

Youtube-player: add support to toggle FullScreen #30485

Closed
mattiLeBlanc opened this issue Feb 13, 2025 · 6 comments · Fixed by #30491
Closed

Youtube-player: add support to toggle FullScreen #30485

mattiLeBlanc opened this issue Feb 13, 2025 · 6 comments · Fixed by #30491
Assignees
@crisbeto
Labels
area: youtube-player feature This issue represents a new feature or feature request rather than a bug or bug fix P4 A relatively minor issue that is not relevant to core functions

Comments

@mattiLeBlanc
Copy link

mattiLeBlanc commented Feb 13, 2025 •
edited
Loading

Feature Description

I am creating my own controls to Start (playVideo) and Pause (pauseVideo( a video and I would also like to be able to add a fullscreen button outside of the youtube-player component.
There seems to be no function available for it and I also can't requestFullscreen on the iframe.
Is there away, maybe via postMessage to tell the iframe to go trigger fullscreen?
If not, can this be provided?

The Youtube API doesn't mention anything. So I guess it is not possible.

Use Case

Toggle fullscreen when youtube controls are disabled, outside of the youtube component.

We want to use it on a Smart TV and using the D-pad arrows on the remote to go to the fullscreen icon is not very convenient. Being able to programatically go fullscreen should not be anymore insecure as allowing to Play or Pause, I think.
@mattiLeBlanc mattiLeBlanc added feature This issue represents a new feature or feature request rather than a bug or bug fix needs triage This issue needs to be triaged by the team labels Feb 13, 2025
@crisbeto crisbeto self-assigned this Feb 13, 2025
@crisbeto crisbeto added P4 A relatively minor issue that is not relevant to core functions area: youtube-player and removed needs triage This issue needs to be triaged by the team labels Feb 13, 2025
crisbeto added a commit to crisbeto/material2 that referenced this issue Feb 13, 2025
@crisbeto
feat(youtube-player): add API to put the player in fullscreen mode
48b41e4 
Adds a method on the `YouTubePlayer` to put the element in fullscreen mode. This is a bit more involved than just calling `requestFullScreen`, because we also need to change the styles to ensure that the placeholder and the `iframe` cover the whole screen.

Fixes angular#30485.
crisbeto added a commit to crisbeto/material2 that referenced this issue Feb 13, 2025
@crisbeto
feat(youtube-player): add API to put the player in fullscreen mode
b56f637 
Adds a method on the `YouTubePlayer` to put the element in fullscreen mode. This is a bit more involved than just calling `requestFullScreen`, because we also need to change the styles to ensure that the placeholder and the `iframe` cover the whole screen.

Fixes angular#30485.
@crisbeto crisbeto mentioned this issue Feb 13, 2025
Merged
crisbeto added a commit that referenced this issue Feb 19, 2025
@crisbeto
feat(youtube-player): add API to put the player in fullscreen mode (#…
d6fd276 
…30491)

Adds a method on the `YouTubePlayer` to put the element in fullscreen mode. This is a bit more involved than just calling `requestFullScreen`, because we also need to change the styles to ensure that the placeholder and the `iframe` cover the whole screen.

Fixes #30485.
@mattiLeBlanc
Copy link
Author

@crisbeto wow, that is quick.
I see you do the resize in the host of the youtube component. That was my solution to if this wasn't going be possible or picked up.
But I wasn't sure if it would have the same effect as if you click the fullscreen button within the iframe.
I will give a test, thanks.

@mattiLeBlanc
Copy link
Author

Will this be available soon version 19.1.5?

@mattiLeBlanc
Copy link
Author

@crisbeto I wanted to share this:

Image and when I hit fullscreen: Image

The iframe with the youtube video doesn't seem to resize. Is that something I can control?

@mattiLeBlanc
Copy link
Author

mattiLeBlanc commented Feb 19, 2025 •
edited
Loading

okay, I was able to reset the size of the youtube player on resize, it goes to window.outerWidth and window.outerHeight, instead of what it was non fullscreen mode.
It works for the width, but not for the height. But that is probably something I can figure out.

**update: got it to work, using innerheight for height is better and I get it to fullscreen,

@crisbeto
Copy link
Member

It'll be available in 19.2.0.

As for the resizing, I was comparing it to how it looks when it becomes fullscreen through the button inside the iframe and it looked identical. Here's the demo: https://ng-comp-devapp.web.app/youtube-player

@mattiLeBlanc
Copy link
Author

@crisbeto Yes, it is the same. Thanks for the quick pickup!! Much appreciated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@crisbeto crisbeto

Labels
area: youtube-player feature This issue represents a new feature or feature request rather than a bug or bug fix P4 A relatively minor issue that is not relevant to core functions
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(youtube-player): add API to put the player in fullscreen mode crisbeto/material2
2 participants
@crisbeto @mattiLeBlanc