Youtube Video beim Play drücken vergrößern

[reinhardcore]

Hallo!

Ich würde gerne eine Bilddatei in meine Webseite einbetten und wenn man darauf klickt soll dann auf der selben Stelle statt dem Bild ein Youtube Video auftauchen.

Ich kann überhaupt kein HTML/PHP und wende mich deshalb an euch ob mir jemand einen solchen Code schreiben kann und mir hilft das in die Webseite reinzubekommen.

Die Webseite ist diese hier:
Florians.eu


Zurzeit ist noch das Youtube Video direkt drin doch das ist meinem Chef zu groß und er hätte deshalb gerne einen Screenshot von einem Youtube Video aber nur im Klein-Format und dann eben soll das größere Youtube Video auftauchen und starten.

Hier der Code mitdem ich das Video zurzeit drin hab:

<object width="425" height="344"><param name="movie" value="
http://www.youtube.com/v/LZXleyXEZO8&hl=de&fs=1"></param><param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/LZXleyXEZO8&hl=de&fs=1"
type="application/x-shockwave-flash" width="425" height="344"
allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

URL des Videos:

http://www.youtube.com/watch?v=LZXleyXEZO8

Es würde mich sehr freuen wenn mir jemand helfen würde.

Liebe Grüße Reinhard

[Kropff]

Gerne, wenn du deinen Code vorher umbrichst. Niemand scrollt gerne horizontal.

Peter

[unset]

Das ließe sich über JavaScript umsetzen. Dabei müsstest du bei Klick auf dein Bild dynamisch den YouTube-Code einbinden.

Wenn dir das zu technisch ist, kannst du die Größe des Videos auch beschränken

Edit: Oh, und PHP ist das sowieso nicht.

[reinhardcore]

Gerne, wenn du deinen Code vorher umbrichst. Niemand scrollt gerne horizontal.

Peter

Sorry, habe es bereits geändert.

Das ließe sich über JavaScript umsetzen. Dabei müsstest du bei Klick auf dein Bild dynamisch den YouTube-Code einbinden.

Wenn dir das zu technisch ist, kannst du die Größe des Videos auch beschränken

Edit: Oh, und PHP ist das sowieso nicht.

Genau die Lösung mit Javascript sowas suche ich.

Kennt jemand dazu den Code?

Lg

[Kropff]

Gib dem Youtube-Abschnitt ein style="display: none" und eine eindeutige ID (z.B. id="video". Dann baust du das Bild ein. Da legst du darauf einen Event-Handler à la

onclick="this.style.display = 'none'; document.getElementById('video').style.display = 'block'; 

drauf und fertig.

Peter

[AmicaNoctis]

Ergänzung zu Kropff:

damit getElementById auch funktioniert, musst du dem object-Element noch das id-Attribut hinzufügen und das ganze per style-Attribut verstecken:

<object [B]id="video" style="display: none"[/B] width="425" height="344">...

Ich weiß, das hat Kropff alles schon gesagt, aber da der TO gar kein HTML kann, wollte ich es nochmal ganz genau zeigen.

[Kropff]

damit getElementById auch funktioniert, musst du dem object-Element noch das id-Attribut hinzufügen:

Hab ich doch schon gesagt . Außerdem gilt das auch für das <embed>

Peter

[AmicaNoctis]

Hab ich doch schon gesagt .

ich weiß, siehe mein Edit

Außerdem gilt das auch für das <embed>

Nein, es darf nur eindeutige IDs geben.

[Kropff]

Nein, es darf nur eindeutige IDs geben.

Upsi. Nur wird das dann im FF auch funktionieren? Oder muss man da ein zusätzliche Unterscheidung machen? Habe seit über zwei Jahren nicht mehr mit Flash zu tun gehabt.

Peter

[reinhardcore]

wo muss ich denn nun welchen code einfügen?
es tut mir ja wirklich leid aber ich check von dem ganzen gar nichts.
ich habe versucht diesen code:

<object id="video" style="display: none" width="425" height="344">...
ganz am Anfang des Youtubecodes einzufügen und dann war das Video nicht mehr sichtbar.

Also irgendwas hat es schon bewirkt aber nicht das richtige anscheinend.

lg

[Kropff]

Gib dem Youtube-Abschnitt ein style="display: none" und eine eindeutige ID (z.B. id="video". Dann baust du das Bild ein. Da legst du darauf einen Event-Handler à la

onclick="this.style.display = 'none'; document.getElementById('video').style.display = 'block'; 

drauf und fertig.

Peter

Wo ist das Problem?

Peter

[reinhardcore]

[FONT=monospace]So sieht nun mein Youtube code aus:

<object width="425" height="344"><param name="movie" value="
http://www.youtube.com/v/LZXleyXEZO8&hl=de&fs=1"></param><param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/LZXleyXEZO8&hl=de&fs=1"
type="application/x-shockwave-flash" width="425" height="344"
allowscriptaccess="always" allowfullscreen="true"></embed>
</object><style="display: none"><id="video">

Den folgenden Text:
[COLOR=black]
[/COLOR][/FONT] [COLOR=#000000] [COLOR=black][COLOR=#0000CC]onclick[/COLOR][COLOR=#006600]=[/COLOR][/COLOR][COLOR=#CC0000][COLOR=black]"this.style.display = 'none'; document.getElementById('video').style.display = 'block';

Wie kommt der dann zum Bild? [/COLOR]
[/COLOR][/COLOR]

[AmicaNoctis]

Das ist falsch, bitte nochmal genau lesen, es steht alles schon da.

Der kommt so zum Bild:

<img onclick="this.style.display = 'none'; document.getElementById('video').style.display = 'block';" src="..." alt="..." />

Dort wo die Pünktchen sind, nimmst du die Werte die du schon hast.

[Kropff]

Außerdem

<object width="425" id="video" style="display: none;" 

Peter

[unset]

Finde die Lösung eher nicht so toll. Zum einen startet der Film nicht automatisch, was ich erwarten würde, wenn ich den Shot anklicke, zum anderen läuft der Film weiter, auch wenn das ganze wieder ausgeblendet wird.