Question

我有一个iframed到网页的表单。完成表单后，将使用iframe嵌入显示YouTube视频。

当我进入YouTube视频的全屏模式时，没有任何事情发生。

嵌套iframe的全屏是否受父iframe尺寸的约束？

Answer 1

如果我理解正确，你的iframe包含第二个iframe（youtube one）尝试将allowfullscreen属性添加到＆＃34; parent＆＃34; iframe中。

对于完整的浏览器支持，它应如下所示：

<iframe src="your_page_url" 
        allowfullscreen="allowfullscreen"
        mozallowfullscreen="mozallowfullscreen" 
        msallowfullscreen="msallowfullscreen" 
        oallowfullscreen="oallowfullscreen" 
        webkitallowfullscreen="webkitallowfullscreen"> </iframe>

Answer 2

React.JS人员，请记住allowFullScreen和frameBorder="0"

如果没有驼峰式的情况，请将这些标签剥离出来！

Answer 3

添加allowfullscreen="allowfullscreen"并更改YouTube嵌入的类型解决了我的问题。

Answer 4

我必须将allowFullScreen属性添加到“父”iframe。属性的情况很重要。我不认为Firefox或Edge / IE11具有浏览器特定的allowFullScreen属性。所以它看起来像这样：

<iframe allowFullScreen='allowFullScreen' src='http://api.youtube.com/...'/>

Answer 5

不建议在iframe标记中放入allowfullscreen而不将其设置为true。对于全屏问题，嵌入式YouTube视频不提供此问题的更新答案，是将标记内的allowfullscreen设置为true：

<iframe 
   id="player" 
   src="URL here" 
   allowfullscreen="true">
</iframe>

经过测试，可在所有浏览器上正常使用。

Answer 6

在HTML5中，只需使用：

<iframe src="https://www.youtube.com/embed/ID" allowfullscreen />

如果允许通过调用true方法将帧置于全屏模式，则可以将此属性设置为Element.requestFullscreen()。如果未设置，则无法将元素置于全屏模式。见Mozilla Docs

在React.js framework中使用属性allowFullScreen。

请注意，有更多答案指向不同的方向，所以希望这篇文章能够统一并简化所有提到的最新有效方法。

Answer 7

我找到了一个适合我的解决方案，感谢名为@ orangecoat-ciallella的人

https://www.drupal.org/node/1807158

Ubuntu上的Chrome浏览器无法使用“全屏”按钮。

我正在使用media_youtube模块进行D6。在iframe中，它使用了模式//www.youtube.com/v/videoidhere的视频网址。

我使用主题预处理功能使其输出＆gt; //www.youtube.com/embed/videoidhere   它立即开始允许全屏按钮工作。

简而言之，如果您遇到问题，请尝试将/ v /更改为/嵌入/在YouTube网址中。

Answer 8

将allowfullscreen="true"添加到iframe

  <iframe src="URL here" allowfullscreen="true"> </iframe>

Answer 9

我们可以在视频下方获取代码。在股票期权中，我们将嵌入期权。如果单击嵌入，我们将获得该视频的代码段。

与下面的代码相似

<iframe width="560" height="315" src="https://www.youtube.com/embed/GZh_Kj1rS74" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

上面的代码将帮助您获得全屏选项。

Answer 10

如果添加allowfullscreen无济于事，请确保iframe网址中没有&fs=0。

Answer 11

最佳解决方案，并且是使用以下简单代码即可实现的最简单解决方案：

<iframe id="player" src="URL" allowfullscreen></iframe>

经过测试，可在所有浏览器上正常使用。

谢谢

Answer 12

在 2021 年实现这一目标的最简单方法是：转到您想要的 YouTube 视频，点击分享并选择 embed。将代码复制并粘贴到您的 html 中，您就可以开始使用了！

Answer 13

我设法找到一种相对简洁的方法来做到这一点。要查看其工作情况，请点击我的网页：http://developersfound.com/yde-portfolio.html并将鼠标悬停在“Youtube演示”链接上。

下面是两个片段，展示如何轻松完成这项工作：

我用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&amp;start=0&amp;rel=0&amp;fs=1&amp;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&amp;start=0&amp;rel=0&amp;fs=1&amp;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 Validator进行了检查，它验证了HTML5没有错误。

同样重要的是要注意：Youtube嵌入URL有时会检查请求是否来自服务器，因此可能需要设置测试环境以侦听外部IP。因此，您可能需要在路由器上设置端口转发才能使此解决方案正常工作。一旦设置了端口转发，只需从外部IP而不是LocalHost进行测试。请记住，有些路由器需要从LocalHost / loopback转发端口，但大多数路由器使用与登录路由器时相同的IP。例如，如果您的路由器登录页面是192.168.0.1，那么端口转发必须使用192.168.0。哪里？可能是任何未使用的数字（您可能需要进行实验）。您可以从此地址添加测试环境监听的端口（通常为80,81,8080或8088）。

Answer 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);

Answer 15

带挖孔的矿在铬上工作。通过转到Firefox并将<about:config>设置为full-screen-api.allow-trusted-requests-only，使其在false中工作。

全屏工作一次后，我可以将其设置为true，而全屏仍然工作，这很令人困惑。

YouTube iframe嵌入 - 全屏

15 个答案: