Wer Videos von YouTube & Co in seine Webseiten einbaut, macht die Erfahrung, daß der auf den Videohostingseiten dafür vorgesehene Quellcode, den man per «Copy & Paste» zu sich rüberzieht, nicht standardkonform ist.
Nach Einbau dieses Codes validieren die Seiten beim Markup Validation Service des W3C nicht mehr. Dafür hatte ich zwar vor einigen Wochen eine Lösung bei Wildbits entdeckt, war aber noch nicht ganz zufrieden.
Denn der bei Wildbits vorgestellte Code validiert zwar auf den W3C-Seiten, aber in der Firefox-Extension HTML-Tidy (die diese Validierung automatisch bei allen aufgerufenen Seiten überprüft und mittels grünem Häkchen in der Statusleiste unten rechts die korrekte Validierung anzeigt – sehr empfehlenswert! -), wird immer noch ein Fehler angezeigt:
Warnung: discarding unexpected </param>
Mit Hilfe meines Kollegen Henning Manske bin ich nun auf die Lösung gekommen (Danke, Henning, für den entscheidenden Tipp, daß es am nicht korrekt geschlossenen param-Tag lag – worauf ich ja durch die eindeutige Fehleranzeige im HTML-Tidy selbst hätte kommen können ;-) ).
Wählt man diesen XHTML-Code (und ersetzt natürlich www.youtube.com/v/DEINE_VIDEO_ID durch die tatsächliche Video-Adresse), klappt’s auch mit der korrekten Einbindung:
<object type="application/x-shockwave-flash" style="width:425px; height:350px" data="http://www.youtube.com/v/DEINE_VIDEO_ID"><param name="movie" value="http://www.youtube.com/v/DEINE_VIDEO_ID" /></object>
Und hier der Code zum Kopieren: Reinklicken, und «Strg c» tippen:
10 Antworten bis jetzt ↓
Text & Blog » Mas Que Nada - Sergio Mendes with Black Eyed Peas sagt am 04.08.2006 um 03:03 Uhr:
[...] Ein langer Tag geht zu Ende, jetzt will ich aber doch noch den heute zurechtgestrickten validen XHTML-Code zur standardkonformen Videoeinbindung in die Praxis umsetzen (zumal ich mir heute noch durch die Bearbeitung der Quicktags einen schicken Video-Einbau-Button in mein WordPress-Admin-Tool gebaut habe). Ausgesucht habe ich mir hierzu «Mas Que Nada» in der Version von Sergio Mendes mit den Black Eyed Peas. Vorhang auf: [...]
mike sagt am 05.08.2006 um 02:53 Uhr:
Oh, da hat also jemand das Rad neu erfunden.
Der Klassiker ist zu dem Problem dieser: http://www.dodabo.de/html+css/flashsatay/ (bzw. das englische Original)
Dort kann man auch etwas über die Vorgehensweise bis zur Lösung des Problems und über Fallstricke nachlesen.
Markus sagt am 05.08.2006 um 03:03 Uhr:
Aha, danke für den Hinweis, dort wird das Problem ja sehr ausführlich behandelt.
Hätte ich die Seite(n) vorher gekannt, wäre ich schneller und einfacher zur Lösung gekommen. Wenn man es sich allerdings selbst erarbeitet, schadet’s ja auch nix… ;-)
Gerrit sagt am 05.08.2006 um 09:46 Uhr:
Ergänzend zum Flash-Satay-Artikel gibts bei ALA seit Juli diesen Artikel.
Markus sagt am 05.08.2006 um 10:23 Uhr:
Danke, Gerrit. Scheinbar kennen alle das Problem, können viele Quellen zitieren, bauen aber Videos trotzdem nicht korrekt in ihre Seiten ein, übrigens auch du nicht ;-) .
stephan sagt am 06.08.2006 um 21:58 Uhr:
Hallo,
vielleicht noch ein anderer Hinweis zur Nutzung der diversen Video-Services:
Viele Blogs verwenden ja die Lightbox-Effekte für Bilder, diese haben mit dem Standard-Code, den youtube & co erzeugen ein Problem: Die Videos überlagern die vergrößerten Bilder!
Hier findet sich eine Abhilfe: http://blog.stephan.manske-net.....esung.html
Showbühne und Quellcode-Korrektur » Text & Blog – Das Weblog von Markus Trapp. sagt am 25.03.2007 um 13:15 Uhr:
[...] nicht webstandardkonform funktioniert, habe ich letztes Jahr schon in diesem Artikel beschrieben: «Valider XHTML-Code zur Videoeinbindung». Mit den dort beschriebenen Erläuterungen ließ sich auch das aktuelle Problem lösen: Der [...]
Boje sagt am 27.08.2007 um 13:28 Uhr:
Danke an euch alle für die Tips!
links for 2008-04-06 | unblogged|Artikelverzeichnis sagt am 06.04.2008 um 23:34 Uhr:
[...] Valider XHTML-Code zur Videoeinbindung » Text & Blog – Das Weblog von Markus Trapp
Wer Videos von YouTube & Co in seine Webseiten einbaut, macht die Erfahrung, daß der auf den Videohostingseiten dafür vorgesehene Quellcode, den man per «Copy & Paste» zu sich rüberzieht, nicht standardkonform ist. Nach Einbau dieses Codes validieren (tags: webdesign Video web2.0 howto videos youtube wordpress) [...]
Youtube Videos und valides XHTML | Da Dirnbocher sagt am 19.07.2009 um 12:02 Uhr:
[...] Die Lösung, die ich nun verwende stammt von Wildbits in der korrigierten Fassung von Text & Blog. [...]
Diesen Beitrag kommentieren