当 loading/embedding 来自其他网站的视频时，全屏选项不可用，而不是来自 youtube.com

Question

我正在 Angular 中构建一个应用程序，我在其中使用 Iframe 呈现视频。 URL，我从控制器传递到 HTML Iframe 源标记为：

this.url2 = this.sanitizer.bypassSecurityTrustResourceUrl("https://example.com/embed/"+this.video_id_);

（abc.com 是我在这里使用的虚拟名称）

此处

video_id_

是我从 API 得到的。

现在问题是我在使用

this.url2 = this.sanitizer.bypassSecurityTrustResourceUrl("https://youtube.com/embed/"+this.video_id_);

然后视频有全屏按钮，正如我们在每个 youtube 视频上看到的那样，但是当我使用 youtube.com 以外的其他 link 时，控件就会丢失。

html代码是：

<iframe *ngIf="url2" 
     [src]="url2" allowfullscreen="1"
        mozallowfullscreen 
        msallowfullscreen
        oallowfullscreen
        webkitallowfullscreen
     width="100%" height="120%" >
     </iframe>

youtube 的屏幕截图是：

在此屏幕截图中，如果您会在视频的右侧看到控件，当用户单击该控件时，视频将以全屏模式播放。

下一张截图是：

在此屏幕截图中，您会看到缺少以全屏模式获取视频的控件。

我该怎么做才能获得控制权？

Answer 1

看看allowfullscreen

的documentation

它说它只给 iframe "permission" 以进入全屏模式。 iframe 仍然必须主动 requestFullscreen() 才能真正进入全屏模式。

Youtube、Vimeo 等视频网站都在其界面中实现了实现 requestFullscreen() 的按钮。换句话说，由于 allowfullscreen 属性，您在 youtube 示例中看到的全屏按钮不存在。它在那里是因为 youtube 开发者把它放在那里。

当 loading/embedding 来自其他网站的视频时，全屏选项不可用，而不是来自 youtube.com

Fullscreen option is not available when loading/embedding the video from some other site, other than from youtube.com

html

angular

video

iframe

fullscreen