YouTube Iframe Embed - Vollbild

Ich habe ein Formular, das in eine Webseite eingebettet ist. Nach dem Ausfüllen des Formulars wird ein YouTube-Video angezeigt, in dem iframe eingebettet ist.

Wenn ich in den Vollbildmodus des YouTube-Videos gehe, passiert nichts wirklich.

Wird der Vollbildmodus des verschachtelten Iframes durch die Abmessungen des übergeordneten Iframes eingeschränkt?

Wenn ich das richtig verstehe, hast du einen Iframe, der einen zweiten Iframe enthält (den YouTube-Iframe).
Versuchen Sie, das allowfullscreenAttribut dem "übergeordneten" Iframe hinzuzufügen .

Für eine vollständige Browserunterstützung sollte dies folgendermaßen aussehen:

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

React.JS Leute, erinnere dich allowFullScreenundframeBorder="0"

Reagieren Sie ohne Kamelhülle diese Tags!

Das Hinzufügen allowfullscreen="allowfullscreen"und Ändern des Typs der YouTube-Einbettung hat mein Problem behoben.

Ich musste dem "übergeordneten" Iframe das Attribut allowFullScreen hinzufügen. Der Fall des Attributs spielt eine Rolle. Ich glaube nicht, dass Firefox oder Edge / IE11 ein browserspezifisches allowFullScreen-Attribut haben. Es sieht also ungefähr so ​​aus:

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

Verwenden Sie in HTML5 einfach:

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

Dieses Attribut kann festgelegt werden, truewenn der Frame durch Aufrufen seiner Element.requestFullscreen()Methode in den Vollbildmodus versetzt werden darf . Wenn dies nicht festgelegt ist, kann das Element nicht in den Vollbildmodus versetzt werden. Siehe Mozilla Docs

Verwenden Sie im React.js-Framework die Eigenschaft allowFullScreen.

Beachten Sie, dass es mehr Antworten gibt, die auf verschiedene Richtungen verweisen. Hoffen Sie also, dass dieser Beitrag alle genannten Punkte mit dem neuesten gültigen Ansatz vereint und vereinfacht.

Das Einfügen von allowfullscreen in das iframe-Tag, ohne es auf true zu setzen, ist bereits veraltet. Die aktualisierte Antwort für dieses Problem im Vollbildmodus, das bei eingebetteten YouTube-Videos nicht verfügbar ist, besteht darin, allowfullscreen auf true inside tag zu setzen:

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

Getestet und funktioniert für alle Browser ohne Probleme.

Die beste und einfachste Lösung , um dies mit diesem einfachen Code zu erreichen:

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

Getestet und funktioniert für alle Browser ohne Probleme.

Vielen Dank

Ich habe auf dieser Seite eine Lösung gefunden, die dank jemandem namens @ orangecoat-ciallella für mich funktioniert hat

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

Die Schaltfläche "Vollbild" funktionierte in meinem Chrome-Browser unter Ubuntu nicht.

Ich habe das Modul media_youtube für D6 verwendet. Im Iframe wurde eine Video-URL des Musters //www.youtube.com/v/videoidhere verwendet.

Ich habe die Theme-Vorverarbeitungsfunktion verwendet, um die Ausgabe> //www.youtube.com/embed/videoidhere zu veranlassen, und sie hat sofort begonnen, die Vollbild-Schaltfläche funktionieren zu lassen.

Kurz gesagt, versuchen Sie, / v / in / embedded / in der YouTube-URL zu ändern, wenn Sie ein Problem haben.

Wenn das Hinzufügen allowfullscreennicht hilft, stellen Sie sicher, dass &fs=0Ihre iframe-URL keine enthält .

jut Add allowfullscreen="true"zuiframe

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

Wir können den Code unter dem Video bekommen. In der Share-Option wird eine Option eingebettet. Wenn wir auf die Einbettung klicken, erhalten wir das Code-Snippet für dieses Video.

Dies wird dem folgenden Code ähnlich sein

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

Der obige Code hilft Ihnen dabei, die Vollbildoption zu erhalten.

Das Einfügen nach dem äußersten Iframe aus dem verschachtelten Iframe heraus hat das Problem für mich behoben.

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

Es gelang mir, einen relativ sauberen und einfachen Weg zu finden, dies zu tun. Um zu sehen, wie es funktioniert, klicken Sie auf meine Webseite: http://developersfound.com/yde-portfolio.html und bewegen Sie den Mauszeiger über den Link "Youtube Demos".

Im Folgenden finden Sie zwei Ausschnitte, die zeigen, wie dies ganz einfach möglich ist:

Dies habe ich mit einem iFrame erreicht. Angenommen, dieses DOM ist 'yde-home.html'. Dies ist die Quelle Ihres 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>

Angenommen, dies ist das DOM, das den iFrame lädt.

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

Ich habe dies auch mit dem W3c Validator verglichen und er validiert einen HTML5 ohne Fehler.

Es ist auch wichtig zu beachten, dass: Youtube-Einbettungs-URLs manchmal prüfen, ob die Anforderung von einem Server stammt, sodass möglicherweise Ihre Testumgebung so eingerichtet werden muss, dass Ihre externe IP-Adresse abgehört wird. Daher müssen Sie möglicherweise die Portweiterleitung auf Ihrem Router einrichten, damit diese Lösung funktioniert. Sobald Sie die Portweiterleitung eingerichtet haben, testen Sie einfach von der externen IP anstelle von LocalHost. Denken Sie daran, dass einige Router eine Portweiterleitung von LocalHost / Loopback benötigen, die meisten jedoch dieselbe IP-Adresse verwenden, mit der Sie sich beim Router angemeldet haben. Wenn Ihre Router-Anmeldeseite beispielsweise 192.168.0.1 lautet, muss die Portweiterleitung 192.168.0 verwenden. wo ? kann eine beliebige nicht verwendete Nummer sein (möglicherweise müssen Sie experimentieren). Von dieser Adresse aus würden Sie die Ports hinzufügen, von denen Ihre Testumgebung abhört (normalerweise 80, 81, 8080 oder 8088).

Ich bemerkte, dass meine auf Chrom arbeitete. Verstanden zur Arbeit in Firefoxindem Sie auf <about:config>und Einstellung full-screen-api.allow-trusted-requests-onlyzu false.

Nachdem der Vollbildmodus einmal funktioniert hatte, konnte ich ihn wieder auf true setzen, und der Vollbildmodus funktionierte immer noch, was ziemlich verwirrend war.