YouTube iframeembedded – 全屏幕
我有一个表单是iframed到一个网页。 完成表单后，将使用iframeembedded来显示YouTubevideo。
当我进入YouTubevideo的全屏模式时，什么也没有发生。
嵌套iframe的全屏是由父iframe的尺寸限制的吗？
如果我理解正确，你有一个iframe包含第二个iframe（youtube之一）。
尝试将allowfullscreen属性添加到“父”iframe。
对于完整的浏览器支持，应该看起来像这样：
<iframe src="your_page_url" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen"> </iframe>
React.JS人，请记住allowFullScreen和frameBorder="0"
没有骆驼案件，反应剥离这些标签！
添加allowfullscreen =“allowfullscreen”并更改YouTubeembedded的types解决了我的问题。
我不得不将allowFullScreen属性添加到“父”iframe。 属性的情况很重要。 我不认为Firefox或Edge / IE11具有浏览器特定的allowFullScreen属性。 所以看起来像这样：
<iframe allowFullScreen='allowFullScreen' src='http://api.youtube.com/...'/>
我发现一个解决scheme，在这个页面上工作，感谢有人叫@ orangecoat-ciallella
https://www.drupal.org/node/1807158
在Ubuntu的我的Chrome浏览器中，“全屏”button不起作用。
我正在使用D6的media_youtube模块。 在iframe中，它使用的是//www.youtube.com/v/videoidhere模式的videourl。
我使用主题预处理function，使其输出> //www.youtube.com/embed/videoidhere，并立即开始允许全屏button工作。
简而言之，如果您遇到问题，请尝试更改/ v / to / embed /在YouTubeurl中。
从嵌套的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);
我设法find一个相对简单的方法来做到这一点。 要看到它的工作点击我的网页： http : //developersfound.com/yde-portfolio.html并hover在“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&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>
我也检查了这个W3Cvalidation器，它validation了一个没有错误的HTML5。
另外需要注意的是：YoutubeembeddedURL有时会检查请求是否来自服务器，因此可能需要设置您的testing环境来侦听您的外部IP。 因此，您可能需要在路由器上设置端口转发，以便此解决scheme可以正常工作。 一旦你build立了端口转发，只需从外部IP而不是LocalHost进行testing。 请记住，某些路由器需要从LocalHost / loopback进行端口转发，但大多数路由器使用的是您用来login路由器的IP。 例如，如果您的路由器login页面是192.168.0.1，那么端口转发将不得不使用192.168.0。 哪里？ 可能是任何未使用的数字（您可能需要试验）。 从这个地址你可以添加你的testing环境监听的端口（通常是80,81,8080或8088）。
