YouTube iframe 嵌入 - 全屏
Posted
技术标签:
【中文标题】YouTube iframe 嵌入 - 全屏【英文标题】：YouTube iframe embed - full screen 【发布时间】：2015-02-27 16:17:45 【问题描述】：我有一个 iframe 到网页中的表单。完成表单后，将使用 iframe embed 显示 YouTube 视频。
当我进入 YouTube 视频的全屏模式时，什么都没有发生。
嵌套 iframe 的全屏是否受父 iframe 的尺寸限制？
【问题讨论】：
看看这个philipwalton.com/articles/what-no-one-told-you-about-z-index 你能不能做一个工作的JSFiddle？ 【参考方案1】：在 Edge 和 Chrome 上测试了以下代码。扩展到全浏览器视图，但不是全屏。我不得不坚持这种解决方法，因为上述解决方案都不适用于我的情况。
这也会立即自动播放视频静音。
<html>
<head>
<body>
<iframe src="https://www.youtube.com/embed/742lIJQVlSg?mute=1&autoplay=1" frameborder="0" margin margin scrolling="auto" allowfullscreen></iframe>
</body>
</head>
</html>
【讨论】：
【参考方案2】：在 2021 年实现这一目标的最简单方法是：
转到您想要的 youtube 视频，单击分享并选择 embed。将代码复制并粘贴到您的 html 中，一切顺利！
【讨论】：
【参考方案3】：在当前的 YouTube iframe (2021) 中，您必须将 fullscreen 添加到 allow 属性：
<iframe allow="fullscreen;">
如果我理解正确，您有一个 iframe，其中包含第二个 iframe（youtube 那个）。
尝试将allowfullscreen 属性添加到“父”iframe。
对于完整的浏览器支持，它应该如下所示：
<iframe src="your_page_url"
allowfullscreen="allowfullscreen"
mozallowfullscreen="mozallowfullscreen"
msallowfullscreen="msallowfullscreen"
oallowfullscreen="oallowfullscreen"
webkitallowfullscreen="webkitallowfullscreen"> </iframe>
【讨论】：
您只需要 ，其他一些属性已弃用。 在新的 youtube 代码中，您必须将fullscreen 添加到 allow 属性的内容中。例如。 allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"
当我做<iframe src = '...?controls=0' allowfullscreen ></iframe>时，它不起作用，当controls =1，然后allowfullscreen起作用时，我怎样才能使它在controls=0时起作用【参考方案4】：
我们可以在视频下方获取代码。在股票期权中，我们将嵌入一个期权。如果我们点击嵌入，我们将获得该视频的代码 sn-p。
类似于下面的代码
<iframe src="https://www.youtube.com/embed/GZh_Kj1rS74" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
以上代码将帮助您获得全屏选项。
【讨论】：
【参考方案5】：将allowfullscreen="true" 添加到iframe
<iframe src="URL here" allowfullscreen="true"> </iframe>
【讨论】：
只添加不带任何值的allowfullscreen也可以【参考方案6】：将 allowfullscreen 放在 iframe 标记内而不将其设置为 true 已被弃用。嵌入式 YouTube 视频不提供全屏此问题的更新答案是在标签内将 allowfullscreen 设置为 true：
<iframe
id="player"
src="URL here"
allowfullscreen="true">
</iframe>
经过测试并适用于所有浏览器，没有问题。
【讨论】：
【参考方案7】：注意到我在 chrome 上工作。通过转到<about:config> 并将full-screen-api.allow-trusted-requests-only 设置为false，让它在Firefox 中工作。
全屏工作一次后，我可以将其设置回true，全屏仍然可以工作，这很令人困惑。
【讨论】：
【参考方案8】：最好的解决方案和最简单的使用这个简单的代码来实现这一点：
<iframe id="player" src="URL" allowfullscreen></iframe>
经过测试并适用于所有浏览器，没有问题。
谢谢
【讨论】：
将 allowfullscreen 放入 iframe 已被弃用。您需要将其设置为 true 才能使其工作。【参考方案9】：如果添加 allowfullscreen 没有帮助，请确保您的 iframe 网址中没有 &fs=0。
【讨论】：
我们不必再设置 fs 的值了，因为默认情况下 fs 的值是 1，这会让展开按钮显示出来。我尝试将 allowfullscreen 放在 iframe 中，但它不再起作用了。更新的修复是将 allowfullscreen 的值设置为 true。【参考方案10】：添加 allowfullscreen="allowfullscreen" 并更改 YouTube 嵌入的类型解决了我的问题。
【讨论】：
还需要在父iFrame上添加allowfullscreen="allowfullscreen" 这对我不起作用。 @Neil 还有其他选择吗？ 我在 ReactJs 中遇到了这个问题。它解决了我的问题。 在 reactjs 中只是将allowFullScreen 放入 iframe 标签并没有解决我的问题。但是allowFullScreen="allowFullScreen" in iframe prop 解决了我在 reactjs 中的问题。【参考方案11】：
在 HTML5 中，只需使用：
<iframe src="https://www.youtube.com/embed/ID" allowfullscreen />
如果通过调用Element.requestFullscreen() 方法允许框架进入全屏模式，则可以将此属性设置为true。如果未设置，则无法将元素置于全屏模式。见Mozilla Docs
在React.js framework 中使用属性allowFullScreen。
请注意，有更多的答案指向不同的方向，所以希望这篇文章能够用最新的有效方法统一和简化所有提到的内容。
【讨论】：
感谢“在 React.js 框架中使用属性 allowFullScreen。”【参考方案12】：我设法找到了一种相对简洁直接的方法来做到这一点。要查看它的工作情况，请点击我的网页：http://developersfound.com/yde-portfolio.html 并将鼠标悬停在“Youtube Demos”链接上。
下面是两个 sn-ps，展示了如何很容易地做到这一点：
我通过 iFrame 实现了这一点。假设这个 DOM 是“yde-home.html”，这是你的 iFrame 的来源。
<!DOCTYPE html>
<html>
<head>
<title>iFrame Container</title>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<style type="text/css">.OBJ-1 border:none; </style>
<script>
$(document).ready(function()
$('#myHiddenButton').trigger('click');
);
</script>
</head>
<body>
<section style="visibility: hidden;">
<button id="myHiddenButton" onclick="$(location).attr('href', '"http://www.youtube.com/embed/wtwOZMXCe-c?version=3&start=0&rel=0&fs=1&wmode=transparent;");">View Full Screen</button>
</section>
<section class="main-area-inner" style="background:transparent;margin-left:auto;margin-right:auto;position:relative;width:1080px;height:720px;">
<iframe src="http://www.youtube.com/embed/wtwOZMXCe-c?version=3&start=0&rel=0&fs=1&wmode=transparent;"
class="OBJ-1" style="position:absolute;left:79px;top:145px;width:1080px;height:720px;">
</iframe>
</section>
</body>
</html>
假设这是加载 iFrame 的 DOM。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Full Screen Youtube</title>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() );
</script>
</head>
<body>
<iframe name="iframe-container" id="iframe-container" src="yde-home.html" style="width: 100%; height: 100%;">
<p>Your browser does not support iFrames</p>
</iframe>
</body>
</html>
我还对照 W3c 验证器对此进行了检查，它验证了 HTML5 没有错误。
还需要注意的是：Youtube 嵌入 URL 有时会检查请求是否来自服务器，因此可能需要设置您的测试环境以侦听您的外部 IP。因此，您可能需要在路由器上设置端口转发才能使此解决方案正常工作。设置端口转发后，只需从外部 IP 而不是 LocalHost 进行测试。请记住，某些路由器需要从 LocalHost/loopback 进行端口转发，但大多数路由器使用与您登录路由器相同的 IP。例如，如果您的路由器登录页面是 192.168.0.1，那么端口转发必须使用 192.168.0。？在哪里 ？可以是任何未使用的数字（您可能需要进行实验）。您可以从该地址添加测试环境所侦听的端口（通常为 80、81、8080 或 8088）。
【讨论】：
【参考方案13】：我必须将 allowFullScreen 属性添加到“父”iframe。属性的大小写确实很重要。我不认为 Firefox 或 Edge/IE11 具有特定于浏览器的 allowFullScreen 属性。所以它看起来像这样：
<iframe allowFullScreen='allowFullScreen' src='http://api.youtube.com/...'/>
【讨论】：
【参考方案14】：在嵌套 iframe 内部的最外层 iframe 之后插入解决了我的问题。
var outerFrame = parent.parent.parent.$('.mostOuterFrame');
parent.$('<iframe />',
src: 'https://www.youtube.com/embed/BPlsqo2bk2M'
).attr('allowfullscreen':'allowfullscreen', 'frameborder':'0'
).addClass('youtubeIframe')
.css(
'width':'675px',
'height':'390px',
'top':'100px',
'left':'280px',
'z-index':'100000',
'position':'absolute'
).insertAfter(outerFrame);
【讨论】：
【参考方案15】：React.JS 人，记住 allowFullScreen 和 frameBorder="0"
没有驼峰式，react 会去掉这些标签！
【讨论】：
使用allowFullScreen="allowFullScreen" 和frameBorder="0" 解决了这个问题。【参考方案16】：
感谢名为 @orangecoat-cialllella 的人，我在此页面上找到了适合我的解决方案
https://www.drupal.org/node/1807158
“全屏”按钮在我的 Ubuntu 上的 Chrome 浏览器中不起作用。
我使用的是 D6 的 media_youtube 模块。在 iframe 中，它使用的是 //www.youtube.com/v/videoidhere 模式的视频 URL。
我使用主题预处理功能使其输出> //www.youtube.com/embed/videoidhere 它立即开始允许全屏按钮工作。
简而言之，如果您遇到问题，请尝试将 YouTube 网址中的 /v/ 更改为 /embed/。
【讨论】：
以上是关于YouTube iframe 嵌入 - 全屏的主要内容，如果未能解决你的问题，请参考以下文章
YouTube iframe 播放器 - 在 iOS 上触发全屏