Video von Youtube als Popup öffnen

LouisZiege · 7. Januar 2018

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 · 7. Januar 2018

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 · 7. Januar 2018

Hey,

schau mal hier: https://developers.google.com/…e/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 · 7. Januar 2018

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

Lupus_III · 8. Januar 2018

Kann ich den Code mal im Zusammenhang sehen?

basti1012 · 8. Januar 2018

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

Stef · 8. Januar 2018

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 · 9. Januar 2018

Vielen Dank Stef!

OLLI24 · 11. November 2018

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 · 11. November 2018

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 · 12. November 2018

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 · 12. November 2018

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

OLLI24 · 12. November 2018

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 · 12. November 2018

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 · 12. November 2018

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 · 12. November 2018

Arne Drews schrieb:

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 · 12. November 2018

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

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