发表新帖
发表新帖

YouTube iframe embed - full screen

前端 未结
关注
14 1411
情深已故
情深已故 2020-12-07 19:42

I have a form that is iframed into a web page. Upon completion of the form, a YouTube video is displayed from using iframe embed.

When I enter full screen mode of th

相关标签:
14条回答
  • 轮回少年
    2020-12-07 20:28

    If I understand correctly you have an iframe that contains a second iframe (the youtube one).
    Try adding the allowfullscreen attribute to the "parent" iframe.

    For full browser support it should look like this:

    <iframe src="your_page_url" 
        allowfullscreen="allowfullscreen"
        mozallowfullscreen="mozallowfullscreen" 
        msallowfullscreen="msallowfullscreen" 
        oallowfullscreen="oallowfullscreen" 
        webkitallowfullscreen="webkitallowfullscreen"> </iframe>
    0 讨论(0)
  • 情深已故
    2020-12-07 20:31

    jut add allowfullscreen="true" to iframe

      <iframe src="URL here" allowfullscreen="true"> </iframe>
    0 讨论(0)
  • 不思量自难忘°
    2020-12-07 20:34

    If adding allowfullscreen does not help, make sure you don't have &fs=0 in your iframe url.

    0 讨论(0)
  • 天涯浪人
    2020-12-07 20:35

    I managed to find a relatively clean straightforward way to do this. To see it working click on my webpage: http://developersfound.com/yde-portfolio.html and hover over the 'Youtube Demos' link.

    Below are two snippets to show how this can be done quite easily:

    I achieved this with an iFrame. Assuming this DOM is 'yde-home.html' Which is the source of your 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>

    Assume this is the DOM that loads the iFrame.

    <!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>

    I've also checked this against the W3c Validator and it validates a HTML5 with no errors.

    It is also important to note that: Youtube embed URLs sometimes check to see if the request is coming from a server so it may be necessary to set up your test environment to listen on your external IP. So you may need to set up port forwarding on your router for this solution to work. Once you've set up port forwarding just test from the external IP instead of LocalHost. Remember that some routers need port forwarding from LocalHost/loopback but most use the same IP that you used to log into the router. For example if your router login page is 192.168.0.1, then the port forward would have to use 192.168.0.? where ? could be any unused number (you may need to experiment). From this address you would add the ports that your test environment listen from (normally 80, 81, 8080 or 8088).

    0 讨论(0)
  • 予麋鹿
    2020-12-07 20:38

    In HTML5, simply use:

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

    This attribute can be set to true if the frame is allowed to be placed into full-screen mode by calling it's Element.requestFullscreen() method. If this isn't set, the element can't be placed into full-screen mode. See Mozilla Docs

    In React.js framework use property allowFullScreen.

    Note that there are more answers pointing to different directions, so hope this post will unite and simplify all mentioned with latest valid approach.

    0 讨论(0)
  • 花落未央
    2020-12-07 20:42

    React.JS People, remember allowFullScreen and frameBorder="0"

    Without camel-case, react strips these tags out!

    0 讨论(0)
 看不清?
提交回复
热议问题