modifizierter iframe f youtube-video

[Pinie]

Salve a tutti,

die Einbindung mit iframe/youtube-av ist einfach, doch ich hätte sie gerne etwas modifiziert und zwar wie folgt:

1. (Nur) ein Foto (Bild, img-tag) soll auf der web site sichtbar sein. Wenn man es anklickt, dann soll (das Foto abhauen und) das video (im iframe) starten. Am Ende des (abgespielten) videos soll dann das Foto "wiederkehren".

How to do it BEST ? Ich könnte mit "visibility" + Javascript arbeiten. Hm. Funktioniert halt nicht, wenn Javascript deaktiviert ist. Und ... wie kriege ich mit, dass das abgespielte Video das Ende erreicht hat (= das Foto/Bild wieder angezeigt werden soll) ?

2. Ein zweiter (leider erfolgloser) Weg (von mir) war, mit window.open ein eigenes Browser-Fenster (mit dem iframe-code) zu öffnen, also das Video der Web Site zu überlagern. Das hat Vorteile, z.B. habe ich bzgl. der Größe des abzuspielenden videos viel mehr Möglichkeiten. Nur dumm, dass es mir nicht gelingt ...

a) Schaltflächen + Informationen des Browser-Sub-Fensters auszublenden; denn ich will nur ein Fenster (evtl mit Rahmen) und einer Möglichkeit abzubrechen/Fenster schließen.

b) eine cross-Browser-"Gleichheit" (z.B. für Firefox + Opera) zu erzielen.

Bin ich zu blöd oder ist das schwierig (oder beides) ?

Grüße nach D aus earthquake town (L'Aquila, Italia) Pinie

[marctrix]

Hej Pinie,

1. (Nur) ein Foto (Bild, img-tag) soll auf der web site sichtbar sein. Wenn man es anklickt, dann soll (das Foto abhauen und) das video (im iframe) starten. Am Ende des (abgespielten) videos soll dann das Foto "wiederkehren".

Da gibt es sicher eine Doku für die YOUTUBE-API - allerdings kann ich damit nciht weiterhelfen.

Weil ich ein skeptischer Mensch bin, fürchte ich aber, dass du das nicht ganz durchdacht hast. Mir scheint, du verschlimmbesserst da nur was. Du nimmst Nutzern den Wiedererkennungswert von Youtube-Videos und brichst damit mit einem wichtigen Prinzip: Don't make me think. - So wird Deine Seite ganz unnötig schlechter bedienbar — und du gibst dir damit auch noch Mühe. Klingt für mich unschlau.

Aber ich kenne Deine Seite natürlich nicht. Ist nur so ein Bauchgefühl.

Marc

[Pinie]

Ciao Marc,

Hej Pinie,

Da gibt es sicher eine Doku für die YOUTUBE-API - allerdings kann ich damit nciht weiterhelfen.

ja, die YouTube API (hab sie gefunden) scheint mir (da) weiterzuhelfen ...

Weil ich ein skeptischer Mensch bin, fürchte ich aber, dass du das nicht ganz durchdacht hast. Mir scheint, du verschlimmbesserst da nur was. Du nimmst Nutzern den Wiedererkennungswert von Youtube-Videos und brichst damit mit einem wichtigen Prinzip: Don't make me think. - So wird Deine Seite ganz unnötig schlechter bedienbar — und du gibst dir damit auch noch Mühe. Klingt für mich unschlau.

Oh, ich kann "skeptische Menschen" gut leiden (die bringen einen weiter, "Ja-Sager" hingegen nicht) 😀

Warum brauchen youtube-Videos einen "Wiedererkennungswert"? Der Punkt für mich ist folgender: Gute songs sind gute Geschichten (das kriegt natürlich nur jener mit, der beim song-text auch HIN-hört) = die Affinität zu meinen "Schreibereien", d.h. das Musik-Video unterstreicht einen Aspekt (meiner Schreibereien) oder fügt einen weiteren Aspekt hinzu: daher platziere ich die songs auf meiner web site.

"verschlimmbessern" & "schlecht bedienbar" sollte aber nicht dabei herauskommen.

Aber ich kenne Deine Seite natürlich nicht. Ist nur so ein Bauchgefühl.

Marc

Das Konzept für die angestrebte Veränderung/Verbesserung steht (mittlerweile) komplett in meinem Kopf, die Realisierung braucht aber Zeit. Ich bin jedoch "guten Mutes", dass ich das so hinkriege, wie ich das haben will. Sobald die Seite steht, würde mich deine Meinung interessieren (Verschlimmbesserung oder nicht ?). Ich lass dann nochmal von mir hören.

Grüße aus earthquake town (L'Aquila = die Stadt des Adlers) Pinie

![Das Symbol des Adlers findet sich hier in allen Logos (z.B.) von Verwaltungen, Vereinen und der Universität.](/images/0bc2ecbb-ebdd-4624-859d-c99355ba7894.jpg?size=medium "L'Aquila (Italia), zu dtsch. "Adler" = ein deutsches Symbol, ein Deutscher war (vor fast 2000) Jahren an der Stadtgründung beteiligt. ")

[marctrix]

Hej Pinie,

Weil ich ein skeptischer Mensch bin, fürchte ich aber, dass du das nicht ganz durchdacht hast.

Oh, ich kann "skeptische Menschen" gut leiden (die bringen einen weiter, "Ja-Sager" hingegen nicht) 😀

So ist es. Ich frage ja nur… 😉

Warum brauchen youtube-Videos einen "Wiedererkennungswert"? Der Punkt für mich ist folgender: Gute songs sind gute Geschichten (das kriegt natürlich nur jener mit, der beim song-text auch HIN-hört) = die Affinität zu meinen "Schreibereien", d.h. das Musik-Video unterstreicht einen Aspekt (meiner Schreibereien) oder fügt einen weiteren Aspekt hinzu: daher platziere ich die songs auf meiner web site.

"verschlimmbessern" & "schlecht bedienbar" sollte aber nicht dabei herauskommen.

Wie gesagt kenne ich die konkrete Seite nicht. Ich mag es aber, ein Video am bekannten roten Abspiel-Button zu erkennen und ein Video teilen zu können, ohne Youtube öffnen zu müssen

Jemand anderes wird auch anderes an der Standard-Darstellung lieb gewonnen haben. Ich fürchte Deine Umsetzung nimmt einem diese Möglichkeiten. Aber dazu müsste ich sie sehen.

Das Konzept für die angestrebte Veränderung/Verbesserung steht (mittlerweile) komplett in meinem Kopf, die Realisierung braucht aber Zeit. Ich bin jedoch "guten Mutes", dass ich das so hinkriege, wie ich das haben will. Sobald die Seite steht, würde mich deine Meinung interessieren (Verschlimmbesserung oder nicht ?). Ich lass dann nochmal von mir hören.

Dass du dir dabei etwas gedacht hast, bedeutet, es kann sinnvoll sein. Aber oft nutzen Menschen unsere Seiten anders, als wir es annehmen. - Man liegt mit Annahmen erschreckend oft daneben. Und wenn sich eine Annahme als richtig erweist, ist sie es morgen oft schon nicht mehr.

Aber das Projekt würde ich so oder so gerne sehn. Klingt spannend!

Marc

[Pinie]

Und wenn sich eine Annahme als richtig erweist, ist sie es morgen oft schon nicht mehr.

Als ich anfing, Geschichten zu schreiben, habe ich nachhaltig versucht, Kritiker zu finden nur leider hatte niemand Zeit (zu lesen). Zwei hab' ich aber gefunden: eine Frau & ein Mann. Die haben ein ganzes Buch von mir gelesen ("Bella Dona"). Das Ergebnis war verblüffend: die Kritik hätte nicht unterschiedlicher ausfallen können. Darüber musste ich lange nachdenken.

Meine Schlussfolgerung (heute) : es gibt immer Leute, die etwas fantastisch finden, während es andere es für idiotisch halten. Wie geht man damit um ? Meiner Ansicht nach möglichst konstruktiv, "will heißen" persönlich authentisch : ich mache es, wie ICH es für richtig halte und lebe damit, dass manch' andere es für idiotisch halten. Doch es bleibt dabei immernoch stimmig mit mir selbst. Es ist/bleibt aufrichtig.

Aber das Projekt würde ich so oder so gerne sehn. Klingt spannend!

Marc

ja; ich schick dir ne pm falls es mir gelingen sollte, ein paar kleinere Problemchen (noch) zu lösen (und dann bin ich auf deine Meinung gespannt / kann mit Kritik leben)

[Pinie]

Aber das Projekt würde ich so oder so gerne sehn. Klingt spannend!

Marc

ja; ich schick dir ne pm falls es mir gelingen sollte, ein paar kleinere Problemchen (noch) zu lösen (und dann bin ich auf deine Meinung gespannt / kann mit Kritik leben)

Gunnar hat ja bereits eine DHTML Lösung gepostet ... was mich anbelangt: meine zahlreichen Fehlversuche haben mich erstmal platt gemacht, ich gebe auf. Nachdem ich wieder zu Kräften gekommen bin, unternehme ich (vielleicht) einen weiteren Versuch auf d Grundlage v jQuery. Da gibt es plugins (e.g. jquery-youtube) die mir das Leben vielleicht einfacher machen können.

Als jemand, der (wie ich) aus der C/C++ Ecke kommt (und dynamische Speicherverwaltung immer selbst programmiert hat), kann JS (+ garbage collector) schon eine enorme "Belastung" sein.

Überhaupt ... es kommt mir so vor, als verhielte sich "jQuery zu Javascript" wie "C++ zu Assembler".

[Gunnar Bittersmann]

@@Pinie

Überhaupt ... es kommt mir so vor, als verhielte sich "jQuery zu Javascript" wie "C++ zu Assembler".

Das kommt dir nur so vor.

jQuery war einmal eine Bibliothek, die den Umgang mit dem DOM vereinfacht hat und Browserunterschiede ausgeglichen hat. Heutzutage hat vieles Einzug in „Vanilla“-JavaScript gehalten (sicherlich auch ein Verdienst von jQuery) und alle relevanten Browser verhalten sich standardkonform.

Es gibt heutzutage kaum noch einen guten Grund, eine riesige Bibliothek wie jQuery einzubinden. Mit „Vanilla“-JavaScript ist man bestens bedient.

LLAP 🖖

[JürgenB]

Hallo,

Überhaupt ... es kommt mir so vor, als verhielte sich "jQuery zu Javascript" wie "C++ zu Assembler".

der vergleich hinkt aber sehr stark. In C++ kannst du sehr gut programmieren, ohne auch nur zu wissen, dass es Assembler gibt. Bei jQuery musst du Javascript und jQuery lernen.

Gruß
Jürgen

[Gunnar Bittersmann]

@@marctrix

1. (Nur) ein Foto (Bild, img-tag) soll auf der web site sichtbar sein. Wenn man es anklickt, dann soll (das Foto abhauen und) das video (im iframe) starten. Am Ende des (abgespielten) videos soll dann das Foto "wiederkehren".

Da gibt es sicher eine Doku für die YOUTUBE-API - allerdings kann ich damit nciht weiterhelfen.

Weil ich ein skeptischer Mensch bin, fürchte ich aber, dass du das nicht ganz durchdacht hast. Mir scheint, du verschlimmbesserst da nur was. Du nimmst Nutzern den Wiedererkennungswert von Youtube-Videos und brichst damit mit einem wichtigen Prinzip: Don't make me think. - So wird Deine Seite ganz unnötig schlechter bedienbar — und du gibst dir damit auch noch Mühe. Klingt für mich unschlau.

Im Gegenteil: Für mich klingt das durchaus schlau. Wenn man YouTube direkt einbettet, lädt YouTube/Google alle möglichen Scripte, um den Nutzer zu tracken. Google hat YouTube sicherlich nicht übernommen, um der Welt einen Gefallen zu tun, sondern um noch mehr Daten über die Welt – d.h. über uns – sammeln zu können.

Wenn man statt gleich YouTube einzubinden erstmal ein Bild anzeigt, was erstmal nichts Schlimmes tut, gibt man nicht ungefragt die Daten seiner Nutzer preis. Wenn sich ein Nutzer bewusst entscheidet, das Video von YouTube sehen zu wollen – und damit seine Daten preiszugeben –, dann ist das seine Entscheidung.

Sowas will YouTube/Google natürlich nicht. Deshalb ist die YouTube-Doku auch so ziemlich die letzte Stelle, wo man so eine Möglichkeit finden wird.

LLAP 🖖

[marctrix]

Hej Gunnar,

1. (Nur) ein Foto (Bild, img-tag) soll auf der web site sichtbar sein. Wenn man es anklickt, dann soll (das Foto abhauen und) das video (im iframe) starten. Am Ende des (abgespielten) videos soll dann das Foto "wiederkehren".

Da gibt es sicher eine Doku für die YOUTUBE-API - allerdings kann ich damit nciht weiterhelfen.

Weil ich ein skeptischer Mensch bin, fürchte ich aber, dass du das nicht ganz durchdacht hast. Klingt für mich unschlau.

Im Gegenteil: Für mich klingt das durchaus schlau. Wenn man YouTube direkt einbettet, lädt YouTube/Google alle möglichen Scripte, um den Nutzer zu tracken.

Das finde ich tatsächlich einen interessanten Anwendungsfall. Aber wie bekommt man so das vom op gewünschte verhalten hin?

Marc

[Pinie]

Marc> Hej Gunnar,

1. (Nur) ein Foto (Bild, img-tag) soll auf der web site sichtbar sein. Wenn man es anklickt, dann soll (das Foto abhauen und) das video (im iframe) starten. Am Ende des (abgespielten) videos soll dann das Foto "wiederkehren".

Da gibt es sicher eine Doku für die YOUTUBE-API - allerdings kann ich damit nciht weiterhelfen.

Weil ich ein skeptischer Mensch bin, fürchte ich aber, dass du das nicht ganz durchdacht hast. Klingt für mich unschlau.

Im Gegenteil: Für mich klingt das durchaus schlau. Wenn man YouTube direkt einbettet, lädt YouTube/Google alle möglichen Scripte, um den Nutzer zu tracken.

Das finde ich tatsächlich einen interessanten Anwendungsfall. Aber wie bekommt man so das vom op gewünschte verhalten hin?

Marc

Ok, Gunnar kann meiner Idee was positives abgewinnen.

Es ist schon richtig, dass das (von mir geplante Vorgehen) das google-Tracking reduziert. Es gibt aber noch eine weitere "Unschönheit", die ich (mit den "Stellvertreter-Fotos") ausschalten will : meine web site soll auch offline verfügbar sein/werden. Das geht gut bis auf die eingebetteten YouTube-Videos = die suchen immer den Server und bieten dann (im offline modus) dieses hässliche "Server nicht gefunden". Auf der betreffenden web site sind dann viele (youtube-)Fenster und überall steht "Server nicht gefunden".

Im Gegensatz zu vielen anderen, die permanent online sind, ziehe ich es vor, nur dann online zu sein, wenn ich online brauche. Mit anderen Worten ... ich arbeite sehr viel offline. Ich denke, ein Bundestrojaner oder sonstige Schadsoftware hat dann weniger Durchgriffsmöglichkeiten auf meinen Rechner. Bin ich online, dann habe ich den Datentransfer über eine Statistik IMMER im Auge (= mache ich nichts und läuft viel Datenaustausch, dann ist was faul). Man gewinnt dabei ein Gefühl dafür, (der Abruf) welche web site wieviel Datentransfer erzeugt; das ist interessant (und aufschlussreich ... beispielsweise geht unfassbar viel Bandbreite für das Nachladen eingebetteter Werbung drauf).

Aber wie bekommt man so das vom op gewünschte verhalten hin?

Marc

es läuft bereits, aber mir fehlen noch die letzten 10 Prozent, Javascript macht mir Kopfzerbrechen (genau genommen die Steuerung des youtube-players über selbst-generierte Events).

Ein separates Fenster brauche ich nicht (mehr), ich habe die Sache mit sich überlagernden DIVs erzeugt (= es entsteht nur der Eindruck eines separaten Fensters und das reicht ja). Ein Problem ist aber (für mich immernoch), das YouTube-Video abbrechen zu können und dann muss "das mutmassliche div-Fenster sich schließen" (visibility = hidden). Es würde reichen, wenn ich dem YT-player den YT-javascript-event "END OF VIDEO" schicken könnte, doch das kriege ich gegenwärtig nicht reibungslos hin.

Je länger ich darüber nachdenke, desto mehr möchte ich Gunnar recht geben: Ein reduziertes User-Tracking ist vielleicht wichtiger als die von mir geplante Kosmetik.

Ich mache folgendes: ich "schleife" noch ein wenig an der Sache und nenne dann (hier) einen link auf - sagen wir - eine "intermediate = nicht perfekte Lösung. Dann können wir besser checken, ob wir alle über "das Gleiche" reden.

Danke erstmal, eure Hinweise sind hilfreich.

Die alte Seite (die ich aufpolieren will) kann ich (zum Vergleich) schon mal nennen: ti amo erzählt von meinem Leben in earthquake town. Bisher sind 5 Youtube-Videos (nach herkömmlichem iframe-Stil) eingebettet.

[MudGuard]

Hi,

ich arbeite sehr viel offline. Ich denke, ein Bundestrojaner oder sonstige Schadsoftware hat dann weniger Durchgriffsmöglichkeiten auf meinen Rechner. Bin ich online, dann habe ich den Datentransfer über eine Statistik IMMER im Auge (= mache ich nichts und läuft viel Datenaustausch, dann ist was faul).

Die Schadsoftware sammelt die Daten, auch wenn Du offline bist - und überträgt sie dann halt erst, wenn wieder eine Verbindung da ist …

Und wenn sie gut^[1] ist, überträgt sie die Daten in kleinen unauffälligen Päckchen.

cu,
Andreas a/k/a MudGuard

---

1. im Sinne von gut gemacht, nicht im Sinne von gut vs. böse ↩︎

[Pinie]

versteh' schon (du hast recht). Wenn sie gut gemacht ist, habe ich mit dieser (meiner) Massnahme wenig Glück.

[marctrix]

Hej Pinie,

Ich denke, ein Bundestrojaner oder sonstige Schadsoftware hat dann weniger Durchgriffsmöglichkeiten auf meinen Rechner.

Hat eigentlich jemand Erfahrung, ob hier Tools helfen, die nur bestimmten Programmen den Zugriff auf das Internet erlauben?

Je länger ich darüber nachdenke, desto mehr möchte ich Gunnar recht geben: Ein reduziertes User-Tracking ist vielleicht wichtiger als die von mir geplante Kosmetik.

Auf jeden Fall. Aussehen ist immer progressive enhancement. Das kommt on top und darf die vorhandene Funktionalität nicht verschlechtern.

Marc

[Gunnar Bittersmann]

@@marctrix

Aber wie bekommt man so das vom op gewünschte verhalten hin?

Man fügt beim Click auf den Link den YouTube-Iframe ins DOM ein. Progressive enhancement at work: ohne JavaScript ist der Link einfach nur ein Link. ☞ erster Versuch

Zum gewünschten Verhalten gehört noch, dass nach Abspielen des Videos der Iframe wieder verschwindet (unsichtbar wird). Mit

Deshalb ist die YouTube-Doku auch so ziemlich die letzte Stelle, wo man so eine Möglichkeit finden wird.

war ich vielleicht etwas voreilig. Das Youtube-Iframe-API bietet da so einige Events zum Lauschen …

LLAP 🖖

PS: Sorry für das Video. 😉

[Pinie]

Nachdem ich das (Javascript-)Trauma mit einem halben Hekto-Liter /(roten) Montepulciano d'Abruzzo heruntergespült (und mich anschließend mit Früchtebrot & Schoko-Herzen wieder aufgebaut) hatte, unternahm ich einen weiteren Versuch ... und siehe da, es scheint geglückt.

Man braucht kaum Javascript & die youtube-api ist nicht mehr nötig, wenn man einen IFRAME in das DIV packt und das "src"-Attribut des IFRAMES (später per Javascript) füllt (wie bei Gunnar's Lösung. Gunnar verwendet aber reines DHTML, während ich mehr auf statisches HTML setze). Dann muss man noch das DIV von "hidden" auf "visible" schalten und es kommt einem so vor, als "laufe" das Video in einem Fenster über den anderen. Dann habe ich noch ein "exit.png" integriert, mit dem man das (Pseudo-)Fenster wieder "schließen" kann (dabei wird nur das src-Attribut des IFRAME gelöscht und das (video-umfassende) DIV wieder auf "hidden" gelegt.

Es findet sich (= bei Bedarf zum Ausprobieren) unter folgendem link: test html file. Diese Datei wird von mir aber nicht lange vorhalten, denn sobald ich noch ein paar weitere Sachen getestet und ergänzt habe, fliesst das Ganze als update in die (deutlich umfangreichere) Target-Seite ein (und "../aq.html" wird gelöscht sein).

Für jene, die nicht ausprobieren, sondern nur "sehen" wollen, wie's aussieht, setze ich das Foto im Anschluss dieser Worte ...

Sei noch angemerkt ... die ersten beiden Foto's (über deren "be-click-en" youtube-Videos angestoßen werden) nutzen ein und denselben IFRAME. Das 3. Foto (am Ende von aq.html) nutzt einen anderen IFRAME. Ich habe das javascript so ausgelegt, dass immer nur 1 video laufen kann, d.h. startet der Benutzer ein video und scrollt dann um ein anderes video zu starten, dann wird das davor gestartete terminiert (= wer hört schon gleichzeitig zwei Schallplatten an ?!).

Die Profis unter euch kriegen wahrscheinlich Schüttelkrämpfe, wenn sie sich meine DIV-Positionierungen anschauen ... entweder hatte ich da noch Rest-Alkohol im Blut oder ich krieg das halt nicht schöner hin.

Firefox & Opera bringen das gleiche Ergebnis (andere Browser hab ich nicht)

Kritik willkommen ! Marc !? Verschlimmbesserung ?

"Buona Natale" aus "der Stadt der Kräne" (und Finger weg vom Alkohol, an Weihnachten kann man sich doch mal benehmen, oder ?)

Pinie

[marctrix]

Hej Pinie,

Kritik willkommen ! Marc !? Verschlimmbesserung ?

Sorry, sehe es jetzt erst und habe mir vorgenommen ab Weihnachten die Finger vom Computer zu lassen…

Erst mal ist es gut, wenn es funktioniert. Bleib aber dran, wenn du selber noch Verbesserungspotential siehst. progressively enhance it!

Und wenn du dabei irgendwann merkst - und das wird kommen wenn du erst mal eine stark verbesserte, aber planlos erstellte Version hast - wie du es von Anfang an hättest machen sollen, machst du es noch einmal „richtig“.

Es lohnt sich einen Lernprozess mit etwas abzuschließen, auf das man noch lange stolz sein kann.

Sorry für die Allgemeinheit dieses Weihnachtspostings… 😉

Marc