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

Question

我有一个提供 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>

这里，当我播放视频时它可以正常工作，但是当我点击全屏选项时，它无法显示全屏，谁能告诉我如何解决这个问题，在此先感谢

Answer 1

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

这不允许它改用此代码

<div id="your_id">

<iframe width="240px" height="130px" 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>

Answer 2

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

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

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

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

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

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

full screen option not working in youtube iframe in html

html

javascript

css

iframe

jquery