全屏选项在 html 中的 youtube iframe 中不起作用

Posted 2023-05-08

【中文标题】全屏选项在 html 中的 youtube iframe 中不起作用

【英文标题】：full screen option not working in youtube iframe in html

【发布时间】：2021-09-12 10:47:59

【问题描述】：

我有一个网站，我提供了 youtube 视频，因为我想提供单独的缩略图，所以我提供了以下代码：

<div class="embed-responsive embed-responsive-16by9 youtube" style="height: 130px; width: 240px;  " src="http://molugu.com/yantraev/divayoutubethumb.jpg" id="h4cYkgPnYQk" >

<iframe   src="https://youtu.be/h4cYkgPnYQk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="true"></iframe>

</div>

<script type="text/javascript" src="https://codegena.com/assets/js/youtube-embed.js"></script>

在这里播放视频时它可以正常工作，但是当我单击全屏选项时，它显示全屏不可用，谁能告诉我如何修复它，提前谢谢

【问题讨论】：

当您将鼠标悬停在全屏图标上时，会有一个链接告诉您为什么它可能不起作用：support.google.com/youtube/answer/…。除此之外，出于安全和可用性原因，现代浏览器可能会限制以全屏模式显示跨域 iframe 内容。

@RoryMcCrossan 我点击了它，它的全屏显示可能被禁用了，但我没有禁用它

【参考方案1】：

你为什么使用这个脚本https://codegena.com/assets/js/youtube-embed.js

这是不允许它使用此代码代替

<div id="your_id">

<iframe   src="https://www.youtube.com/embed/h4cYkgPnYQk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


</div>

【讨论】：

我正在尝试添加自定义缩略图，所以我使用了它

您也可以自己添加自定义缩略图，无需任何外部库

你可能想使用：style="max-width: 240px; max-height: 130px;"而不是 iframe 宽度/高度属性来确保响应性。

【参考方案2】：

另一种解决方案是使用 video.js 而不是旧的 youtube iframe 或 codegena。

Video.js 是嵌入来自各种外部资源（youtube、vimeo 等）的视频并在单个视频播放器中使用它们的理想解决方案。它提供了无穷无尽的自定义选项来适应播放器的外观、感觉和功能。

您可以将它与单个 html 视频标签一起使用，如下所示：

<video
id="vid1"
class="video-js vjs-default-skin"
controls
 
data-setup=' "techOrder": ["youtube"], "sources": [ "type": "video/youtube", "src": "https://www.youtube.com/embed/h4cYkgPnYQk"] '></video>

查看此Codepen 示例以了解其实际效果。

【讨论】：

视频没有加载兄弟