从 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 以外的其他链接时，控件丢失了。

html代码为：

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

youtube 的截图是：

在这个截图中，如果你会在视频的右侧看到控件，当用户点击它时，视频将以全屏模式播放。

下一张截图是：

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

我可以做些什么来控制这些控件？

Answer 1

看看allowfullscreen的documentation

它说它只授予 iframe 进入全屏模式的“权限”。 iframe 仍然必须主动requestFullscreen() 才能真正进入全屏模式。

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