Pop up Fenster / mausover /youtube video

[Giorgianaberlin]

Hallo! Ich möchte ein Youtube video als POP UP Fenster öffnen lassen, wenn mann über ein Bild mit der Mouse rüber scrollt. Gibts eine Möglichkeit dafür? Vielen Dank im Voraus :)

 

[Sempervivum]

Ja, das lässt sich selbstverständlich machen. Bist Du dir darüber im klaren, dass das auf Touch-Geräten nicht funktioniert?

 

[threadi]

Und wenn es ein echtes Popup sein soll, könnte es auch von Desktop-Browsern ignoriert werden.

 

[Giorgianaberlin]

Oh, daran habe ich leider nicht gedacht.. ich habe folgendes gefunden:

html:
<a class="info" href="

"><img src="img/button_trailer.jpg"><span><iframe width="594" height="315" src="https://www.youtube-nocookie.com/embed/KBNBozJLEdM?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe></span></a>

css:
a.info
{
position:relative;
z-index:1;
background-color:#ff0;
color:black;
text-decoration:none;
}

a.info:hover
{
z-index:2;
background-color:black;
}

a.info span
{
display: none;
}

a.info:hover span
{
display:block;
position:absolute;
width:15em;
border:1px solid black;
background-color:black;
color:#000;
text-align: center;
padding: 5px;
font-size: 0.8em;
}



Es funktioniert, aber es gibt ein Problem. Bei Mausover kann ich manchmal nicht play drücken, er verschwindet wenn ich runter auf der Video gehe...

 

[Sempervivum]

Das liegt daran, dass Du das span-Element absolut positionierst. Dadurch wird es nicht als innerhalb des a-Elementes erkannt und die Maus verlässt dieses Element, wenn Du runter zum Video gehst.

 

[Sempervivum]

PS: Ich würde es so machen, dass das Bild beim Hover durch das Video ersetzt wird. Also das Video sichtbar und das Bild unsichtbar machen. Ich verstehe aber nicht den Sinn des Ganzen.

 

[Giorgianaberlin]

Ok, vielen Dank! Ich weiss leider aber nicht wie ich das machen kann, hast du ein code für mich?
Ich brauche es für eine Seite.. Anbei lieg ein Printscreen vorher und nacher :)

 

[Sempervivum]

Sehe ich das richtig, dass auf dem zweiten Bild das Video über dem Bild liegt? Das geht natürlich nur mit absoluter Positionierung. Oder ist das gar kein Bild, sondern HTML mit Text?

 

[threadi]

Ich weiss leider aber nicht wie ich das machen kann, hast du ein code für mich?

Nein. Ausbessern musst Du schon selbst. Wenn dir nicht klar ist was falsch ist, lies die o.g. Seite und schau dir die Vorgaben für den von dir verwendeten HTML-Standard an. Wenn Du jemanden suchst der dir die Seite komplett ausbessert, stell deine Anfrage in der Jobbörse.

 

[Giorgianaberlin]

Sempervivum da ist nur HTML mit Text
threadi Ich will es alleine machen, brauchte nur ein bisschen Hilfe. Danke trotzdem! :)

 

[Sempervivum]

Ich hatte mir zunächst vorgestellt, eine transparente Grafik über das ganze zu legen und auf diese das Hover anzuwenden:
http://jsfiddle.net/gcy10yqb/
Sah auf der ersten Blick gut aus, aber leider kann man dann den Play-Button nicht klicken! So geht es also nicht.

 

[Sempervivum]

Was ich oben geschrieben habe, dass die absolute Positionierung dazu führt, dass bei diesem Element Mouseout erkannt wird, stimmt offenbar nicht, denn dieses funktioniert:
http://jsfiddle.net/gcy10yqb/2/

 

[Tronjer]

So?
http://plnkr.co/edit/vpAnIvgacrHeugtJHUKU?p=preview

 

[Giorgianaberlin]

Was ich oben geschrieben habe, dass die absolute Positionierung dazu führt, dass bei diesem Element Mouseout erkannt wird, stimmt offenbar nicht, denn dieses funktioniert:
http://jsfiddle.net/gcy10yqb/2/

Sieht schon genau so aus wie ich will, aber es funktioniert leider auf meine Seite nicht, habe html und css genohmen aber es zeigt der video gar nicht...

 

[Sempervivum]

Dann poste doch mal die URL deiner Seite. Wenn es im Fiddle funktioniert, sollte es dort auch gehen.

 

[Giorgianaberlin]

Dann poste doch mal die URL deiner Seite. Wenn es im Fiddle funktioniert, sollte es dort auch gehen.

Ich habe gerade rausgefunden, was los ist. Es funktioniert aber der video kommt ganz oben am Anfang der Seite und nicht unten dem "button"...

 

[Giorgianaberlin]

Ich habe position:relative; bei #wrapper:hover #video { dazu gegeben und ist alles prima. Vielen Dank!!!