Video von Youtube als Popup öffnen

LouisZiege

Hallo liebe Community,

ich möchte einen Button auf der Seite erstellen, wo "Video" drauf steht und durch Klick auf den Button soll sich ein Popup-Fenster öffnen, welches ein Youtubevideo abspielt. Ich habs ausprobiert, allerdings funktioniert es nicht.

Hier mal mein Anfang:

Code

<button id="eintest ()">Video</button>
 
 <script>
  
 function popup(URL) {
  ok = window.open(URL)
  if (ok) return false;
  else return true;
} 
</script>

Kann ich die Funktion mit document.getElementbyID aufrufen? (habs probiert hat aber nicht geklappt)

Kann mir da vielleicht jemand helfen?

Danke Voraus.

LG Louis

LouisZiege

Ich habs jetzt soweit, dass es klappt.

Weiß den jemand wie ich statt der URL ein Video per Iframe einfügen kann?

Code

<a href="#" onclick="Test=window.open('https://www.youtube.com/','','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=250,height=250'); return false;">Video</a>

Stef

Hey,

schau mal hier: https://developers.google.com/youtube/player_parameters?hl=de

Du musst an https://www.youtube.com/ embed hinzufügen damit die Url so aussieht: https://www.youtube.com/embed/.

Nun musst du noch die Id des Videos hinzufügen. Die entgültige src-Url sieht dann so aus: https://www.youtube.com/embed/JQRn06QlXDw

Dann sieht ein Iframe für ein Video so aus:

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
</head>
<body>
    <iframe width="500" height="300" src="https://www.youtube.com/embed/JQRn06QlXDw"></iframe>
</body>
</html>

LouisZiege

Super vielen Dank für die Hilfe, jetzt hat es geklappt.

Lupus_III

Kann ich den Code mal im Zusammenhang sehen?

basti1012

was meinst du mit zusammenhang? es steht da doch alles was man brauch

Stef

Lupus_III :

Wenn dein Beitrag auf die Frage, wie dies mit einen PopUp zu ermöglichen ist, geht würde ich es wie folgt machen:

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>

    <style>
        #content {
            position: fixed; 
            display: none; 
            width: 100%; 
            height: 100%; 
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5); 
            z-index: 5; 
            cursor: pointer; 
        }

        #iFrameWindow{
            display: flex;
            justify-content: center;
        }
    </style>
    <script>
        window.onload = function(){

            var link = document.getElementById("popUp");
            var content = document.getElementById("content");

            link.addEventListener("click", showIFrame);
            content.addEventListener("click", hideIFrame);
            
            function showIFrame(){

                var url = "https://www.youtube.com/embed/JQRn06QlXDw";
                var content = document.getElementById("content");
                var section = document.getElementById('iFrameWindow');

                content.style.display = "block";
                section.innerHTML = "<iframe width='500' height='300' src='https://www.youtube.com/embed/JQRn06QlXDw'></iframe>";
        
            }

            function hideIFrame() {
                var content= document.getElementById("content");
                var section = document.getElementById('iFrameWindow');

                content.style.display = "none";
                section.innerHTML = "";
            }           
        }
    </script>
</head>
<body>
    <button id="popUp">Popup</button>

    <section id="content">
        <article id="iFrameWindow">
            
        </article>
    </section>
</body>
</html>

Alles anzeigen

Lupus_III

Vielen Dank Stef!

OLLI24

Hallo,

ich bin gerade hier auf den Beitrag gestoßen...

Genau das suche ich, jedoch möchte ich einen Google-Maps-Iframe öffnen. Jetzt habe ich gedacht, ich brauche nur den <iframe>....</iframe> Inhalt austauschen, aber das wäre ja zu einfach... klappt nicht. Also füge ich den Code so ein, dann wird das Video-PopUp geöffnet. Ersetze ich meinen Iframe Link passiert nix. Kann mir bitte jemand weiterhelfen, wie ich diesen Code für einen Google-iframe nutzen kann bzw. was ich eintragen muss...?

Danke vorab, Olli

Stef

Hey Olli24,

du brauchst bei Google um IFrames auf deiner Seite anzeigen zu können deinen API Schlüssel. Diesen musst du dann an die Quelle anhängen.

Beispiel:

section.innerHTML = "<iframe width='500' height='300' src='https://www.google.com/maps/embed/v1/place?key= dein API Schlüssel'></iframe>

Hier erfährst du mehr: https://developers.google.com/maps/documentation/embed/guide

Grüße,

Stef

OLLI24

Hey Stef,

vielen Dank für Dein Feedback.... ich habe mir bei Google einen API geholt (angemeldet, Bankkonto registriert, API mit Anwendungeeinschränung - also mit verwendeter Domain gesichert) .... dann habe ich den API in Dein Beispiel eingesetzt und das ganze dann wieder in den "PopUp-Code" kopiert und in meine Datei eingesetzt und gespeichert. Aber es passiert nichts. Klicke ich auf den Button passiert nix.... wo liegt mein Fehler?

Gruß Olli

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>

    <style>
        #content {
            position: fixed; 
            display: none; 
            width: 100%; 
            height: 100%; 
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5); 
            z-index: 5; 
            cursor: pointer; 
        }

        #iFrameWindow{
            display: flex;
            justify-content: center;
        }
    </style>
    <script>
        window.onload = function(){

            var link = document.getElementById("popUp");
            var content = document.getElementById("content");

            link.addEventListener("click", showIFrame);
            content.addEventListener("click", hideIFrame);
            
            function showIFrame(){

                var url = "https://www.youtube.com/embed/JQRn06QlXDw";
                var content = document.getElementById("content");
                var section = document.getElementById('iFrameWindow');

                content.style.display = "block";
                section.innerHTML = "<iframe width='500' height='300' src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2431.4294218912605!2d9.355946!3d52.45325!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b07da59edbd4d3%3A0xbef7006bcbfdf94d!2sEngelking+und+Wiegmann+Markenr%C3%A4der!5e0!3m2!1sde!2sde!4v1542018394335/?key=MEIN API CODE "></iframe>        
            }

            function hideIFrame() {
                var content= document.getElementById("content");
                var section = document.getElementById('iFrameWindow');

                content.style.display = "none";
                section.innerHTML = "";
            }           
        }
    </script>
</head>
<body>
    <button id="popUp">Popup</button>

    <section id="content">
        <article id="iFrameWindow">
            
        </article>
    </section>
</body>
</html>

Alles anzeigen

Arne Drews

Mit ? leitet man URL seitig einen QueryString ein, der darf nur einmal vorkommen!

OLLI24

Hallo Arne,

meintest Du damit das "?" vor dem key... also das "?key=MEIN API CODE "></iframe>" ...?
Das habe ich rausgenommen, aber nach wie vor wird das PopUp nicht geöffnet.

Gruß Olli

basti1012

probier es mal so

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <style>
        #content {
            position: fixed; 
            display: none; 
            width: 100%; 
            height: 100%; 
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5); 
            z-index: 5; 
            cursor: pointer; 
        }
        #iFrameWindow{
            display: flex;
            justify-content: center;
        }
    </style>
    <script>
        window.onload = function(){
            var link = document.getElementById("popUp");
            var content = document.getElementById("content");
            link.addEventListener("click", showIFrame);
            content.addEventListener("click", hideIFrame);
            
            function showIFrame(){
                var url = "https://www.youtube.com/embed/JQRn06QlXDw";
                var content = document.getElementById("content");
                var section = document.getElementById('iFrameWindow');
                content.style.display = "block";
                section.innerHTML = '<iframe width="500" height="300" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2431.4294218912605!2d9.355946!3d52.45325!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b07da59edbd4d3%3A0xbef7006bcbfdf94d!2sEngelking+und+Wiegmann+Markenr%C3%A4der!5e0!3m2!1sde!2sde!4v1542018394335/?key=MEIN API CODE "></iframe>';      
            }
            function hideIFrame() {
                var content= document.getElementById("content");
                var section = document.getElementById('iFrameWindow');
                content.style.display = "none";
                section.innerHTML = "";
            }           
        }
    </script>
</head>
<body>
    <button id="popUp">Popup</button>
    <section id="content">
        <article id="iFrameWindow">
            
        </article>
    </section>
</body>
</html>

Alles anzeigen

Du hattest in Zeile43 falsche kommas gesetz.

Mit Fehler konsole hätte man das vieleicht sehen können. Selbst hier im Forum bei den Code Tags kann man den Farblichen unterschied sehen das da was nicht richtig ist.

Gut das muß man jetzt nicht wissen aber soll nur zeigen wie man solche Fehler erkennen kann

Arne Drews

Im src-Attribut des iframe wird zweimal der Query-String eingeleitet!

Es darf aber nur einmal passieren, jeder weitere Parameter muss mit & angehängt werden.

basti1012

Zitat von Arne Drews

Im src-Attribut des iframe wird zweimal der Query-String eingeleitet!

Es darf aber nur einmal passieren, jeder weitere Parameter muss mit & angehängt werden.

Augen wie ein Fuchs,oder wie sagt man das? Ich hatte nur gekuckt ob der Popup auf geht und darauf gar nicht geachtet.

Aber dann sollte sein Script ja jetzt ohne weitere Probleme laufen

OLLI24

... "sein Script läuft jetzt"...!

Super, vielen herzlichen Dank an Euch beide!!!!!

Jetzt mitmachen!