feat(youtube-player): add API to put the player in fullscreen mode (#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.

Author: crisbeto

src/dev-app/youtube-player/BUILD.bazel

@@ -10,6 +10,7 @@ ng_module(
         ":youtube_player_demo_scss",
     ],
     deps = [
+        "//src/material/button",
         "//src/material/checkbox",
         "//src/material/radio",
         "//src/youtube-player",

src/dev-app/youtube-player/youtube-player-demo.html

@@ -15,14 +15,19 @@ <h2>Basic Example</h2>
       <mat-checkbox [(ngModel)]="disablePlaceholder">Disable placeholder</mat-checkbox>
       <mat-checkbox [(ngModel)]="startAt30s">Start at 30s</mat-checkbox>
     </div>
-    <youtube-player [videoId]="selectedVideoId"
-                    [playerVars]="playerVars"
-                    [startSeconds]="startAt30s ? 30 : 0"
-                    [width]="videoWidth"
-                    [height]="videoHeight"
-                    [disableCookies]="disableCookies"
-                    [disablePlaceholder]="disablePlaceholder"
-                    [placeholderImageQuality]="placeholderQuality"></youtube-player>
+    <div class="demo-video-selection">
+      <button mat-button (click)="player.requestFullscreen()">Make fullscreen</button>
+    </div>
+    <youtube-player
+      #player
+      [videoId]="selectedVideoId"
+      [playerVars]="playerVars"
+      [startSeconds]="startAt30s ? 30 : 0"
+      [width]="videoWidth"
+      [height]="videoHeight"
+      [disableCookies]="disableCookies"
+      [disablePlaceholder]="disablePlaceholder"
+      [placeholderImageQuality]="placeholderQuality"/>
   </section>
 
   <h2>Placeholder quality comparison (high to low)</h2>

src/dev-app/youtube-player/youtube-player-demo.ts

@@ -17,6 +17,7 @@ import {
   inject,
 } from '@angular/core';
 import {FormsModule} from '@angular/forms';
+import {MatButton} from '@angular/material/button';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatRadioModule} from '@angular/material/radio';
 import {PlaceholderImageQuality, YouTubePlayer} from '@angular/youtube-player';
@@ -79,7 +80,7 @@ const VIDEOS: Video[] = [
   selector: 'youtube-player-demo',
   templateUrl: 'youtube-player-demo.html',
   styleUrl: 'youtube-player-demo.css',
-  imports: [FormsModule, MatRadioModule, MatCheckboxModule, YouTubePlayer],
+  imports: [FormsModule, MatRadioModule, MatCheckboxModule, MatButton, YouTubePlayer],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class YouTubePlayerDemo implements AfterViewInit, OnDestroy {

src/youtube-player/BUILD.bazel

@@ -19,6 +19,7 @@ ng_module(
         ],
     ),
     assets = [
+        ":youtube_player_scss",
         ":youtube_player_placeholder_scss",
     ],
     deps = [
@@ -30,6 +31,11 @@ ng_module(
     ],
 )
 
+sass_binary(
+    name = "youtube_player_scss",
+    src = "youtube-player.scss",
+)
+
 sass_binary(
     name = "youtube_player_placeholder_scss",
     src = "youtube-player-placeholder.scss",

src/youtube-player/youtube-player-placeholder.scss

@@ -14,6 +14,11 @@
   // Note that they use a base64 image, likely for performance reasons. We can't use the
   // image, because it can break users with a CSP that doesn't allow `data:` URLs.
   box-shadow: inset 0 120px 90px -90px rgba(0, 0, 0, 0.8);
+
+  :fullscreen & {
+    min-width: 100vw;
+    min-height: 100vh;
+  }
 }
 
 .youtube-player-placeholder-button {

src/youtube-player/youtube-player.scss

@@ -0,0 +1,6 @@
+youtube-player:fullscreen {
+  &, iframe {
+    min-width: 100vw;
+    min-height: 100vh;
+  }
+}

src/youtube-player/youtube-player.ts

@@ -113,6 +113,7 @@ enum PlayerState {
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   imports: [YouTubePlayerPlaceholder],
+  styleUrl: 'youtube-player.css',
   template: `
     @if (_shouldShowPlaceholder()) {
       <youtube-player-placeholder
@@ -133,6 +134,7 @@ export class YouTubePlayer implements AfterViewInit, OnChanges, OnDestroy {
   private _ngZone = inject(NgZone);
   private readonly _nonce = inject(CSP_NONCE, {optional: true});
   private readonly _changeDetectorRef = inject(ChangeDetectorRef);
+  private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
   private _player: YT.Player | undefined;
   private _pendingPlayer: YT.Player | undefined;
   private _existingApiReadyCallback: (() => void) | undefined;
@@ -474,6 +476,19 @@ export class YouTubePlayer implements AfterViewInit, OnChanges, OnDestroy {
     return this._player ? this._player.getVideoEmbedCode() : '';
   }
 
+  /**
+   * Attempts to put the player into fullscreen mode, depending on browser support.
+   * @param options Options controlling how the element behaves in fullscreen mode.
+   */
+  async requestFullscreen(options?: FullscreenOptions): Promise<void> {
+    // Note that we do this on the host, rather than the iframe, because it allows us to handle the
+    // placeholder in fullscreen mode. Null check the method since it's not supported everywhere.
+    const element = this._elementRef.nativeElement;
+    return element.requestFullscreen
+      ? element.requestFullscreen(options)
+      : Promise.reject(new Error('Fullscreen API not supported by browser.'));
+  }
+
   /**
    * Loads the YouTube API and sets up the player.
    * @param playVideo Whether to automatically play the video once the player is loaded.

tools/public_api_guard/youtube-player/youtube-player.md

@@ -80,6 +80,7 @@ export class YouTubePlayer implements AfterViewInit, OnChanges, OnDestroy {
     playerVars: YT.PlayerVars | undefined;
     playVideo(): void;
     readonly ready: Observable<YT.PlayerEvent>;
+    requestFullscreen(options?: FullscreenOptions): Promise<void>;
     seekTo(seconds: number, allowSeekAhead: boolean): void;
     setPlaybackRate(playbackRate: number): void;
     setVolume(volume: number): void;