In meiner ersten Beschreibung beschränke ich mich allein auf YouTube, da dies das größte Videoportal ist und die Wahrscheinlich daher hoch ist, dass ihr ein Video von dort einbetten und verlinken wollt. Wollt ihr ein anderes Videoportal erklärt bekommen, so schreibt dies direkt unter diesem Eintrag. Mir würde es auch gefallen, wenn ihr einen Kommentar dazu abgeben könntet, ob ihr mich hier verstanden habt.
YouTube-Videos einbetten
1.Schritt: Welches Video?
Zu allererst benötigt ihr ein Video. Das sollte nicht das Problem darstellen. YouTube ist ja gleich um die Ecke und ihr habt sicher schon eines zur Hand, sonst bräuchtet ihr nicht die Erklärung lesen.
Ihr benötigt nicht den Einbettungscode den euch YouTube vorschlägt, wenn ihr dort auf "Teilen" und dann auf "Einbetten" geht. Weder den "iframe"-Code noch den "embed"-Code. Da ich nämlich HTML im Forum deaktiviert habe, würden diese Codes auch nicht funktionieren. Das ist eine Sicherheitsmaßnahme, sonst könnte man im Forum wesentlich mehr Schindluder treiben, als möglicherweise ohnehin schon. Die von YouTube gebotenen Quellcodes sind also völlig nutzlos.
Bitte nicht weinen. Ich verrate ja, wie es trotzdem geht.
2.Schritt: Uniform Resource Locator?
Kurz URL. Damit beschreibt man im Internet einen eindeutigen Quellanzeiger. Jede URL führt zu einem anderen Ziel und ist somit eindeutig. Und damit zurück aus der Exkursion für Internetlaien, hinein in unser spezielles Problem.
Ihr kopiert die URL des Videos. Die findet ihr in der Adressleiste. Das ist diese kryptische Zeichenkolonne. Ihr fügt dieses für euch sicher nicht nachvollziehbare Wirrwarr in das Textfeld eures Beitrages. Und bitte keine Fragen, wie man denn einen neuen Beitrag erstellt.
Möglicherweise sieht euer Code so oder so ähnlich aus.
- Code: Alles auswählen
http://www.youtube.com/watch?v=1cJbU-w2sec&feature=g-logo&context=G2a85901FOAAAAAAABAA
Da sind mehr Informationen drin, als wir brauchen. Wichtig für uns ist nur die Zeichenkette nach "v=" bis zum ersten "&". Wir benötigen nicht mehr. In diesem Falle ist es die Zeichenkette "1cJbU-w2sec".
3.Schritt: Und wie wird daraus ein Video?
Wir klicken nun auf ein freien Platz im Textfenster. Halt dorthin, wo das Video später erscheinen soll. Dort fügen wir die Zeichenkette (im Beispiel "1cJbU-w2sec") ein. Diese Zeichenkette markieren wir und drücken anschließend auf den Button "youtube" über dem Textfeld. Nun sollte dort folgendes stehen.
- Code: Alles auswählen
[youtube]1cJbU-w2sec[/youtube]
4.Schritt: Wieso zeigt er nichts in der Vorschau an?
Bisher haben wir dem Beitrag vermittelt, welches Video er zeigen soll, nicht aber in welcher Auflösung, also welcher Breite und Höhe. Somit arbeitet er in der Vorschau mit "Nulllängen" und die sind bekanntlich recht kurz und fürs Auge schwer zu erfassen. Eine Analogie: Wenn eine Schale null Äpfel enthält, sieht man die Äpfel folglich nicht. Sie hat also eine Menge an Äpfeln. Diese Menge ist aber so klein, dass wir sie nicht sehen können. So ist es bisher auch mit dem Video. Es hat bereits eine Breite und eine Höhe. Die sind aber derzeit beide bei Null. Ein Video das null Breite und null Höhe hat, ist zwar da, aber ohne gute Brille schwer auszumachen.
Wir gehen nun hinter das letzte Zeichen in der ersten eckigen Klammer, also hinter das Wort "youtube" der ersten Klammer. Dort geben wir ein Freizeichen ein. Vergewissert euch, dass es noch innerhalb der Klammer ist. Darauf folgt eine dreistellige Zahl, die die Breite angibt. Darauf folgt ein weiteres Freizeichen und dann eine dreistellige Zahl, die die Höhe angibt. Alles noch immer in der Klammer.
Wenn ihr nicht wisst, welche Zahl ihr nehmen sollt. So haltet euch an Standarts.
Höhe .. Breite
320 .... 240 (4:3-Format)
480 .... 360 (4:3-Format)
500 .... 315 (16:10-Format, nehme ich meist)
560 .... 315 (16:9-Format, derzeitiger Standart beim YouTube-Player auf der YouTube-Seite)
640 .... 480 (4:3-Format)
Es ist eigentlich ziemlich egal. Das Video skaliert sich automatisch auf die festgelegte Größe. Ist zum Beispiel das Video im Verhältnis 16:9 und ihr habt euch für ein 4:3-Format in der Klammer entschieden, dann werden im eingebetteten Video einfach Balken oben und unten angezeigt. Umgekehrt sind die Balken links und rechts. Das Video läuft deswegen trotzdem ohne Mucken.
Der Quellcode sieht nun ungefähr folgendermaßen aus. Je nachdem, welche Breite, Höhe und welche Zeichenkolonne ihr verwendet, unterscheidet sie sich natürlich.
- Code: Alles auswählen
[youtube 560 315]1cJbU-w2sec[/youtube]
In der Vorschau ergibt das bereits ein Videofenster mit eingebautem Video.
5.Schritt: Was machen wir mit der URL?
Nun haben wir also Video eingebettet und es sollte jetzt auch sichtbar sein. Aber auch die URL ist noch wichtig. Manchmal spinnt ein eingebettetes Video. Also in diesem Forum ist mir das noch nie passiert. Aber es kann ja mal sein. Vielleicht stellt YouTube auch die Codes für das Einbetten um und so ist das Video nicht korrekt sichtbar, bis ich den Code im Administrationsbereich angepasst habe. Das heißt dann aber nicht, das jeder seine Videos neu einbetten muss. Wenn der Code im Administrationsbereich angepasst wurde, funktionieren alle damit arbeitenden Videos automatisch.
Zurück zu unserer URL. Die liegt jetzt noch so rum, wie bestellt und nicht abgeholt. Wir könnten sie nun stehen lassen und mit dem URL-Tag, über dem Textfeld zu finden, "einrahmen". Einfach die Internetadresse des Videos markieren und den URL-Button drücken. Fertig.
Wir könnten aber auch den Link etwas kürzen. Bisher sieht er ja noch so aus:
- Code: Alles auswählen
http://www.youtube.com/watch?v=1cJbU-w2sec&feature=g-logo&context=G2a85901FOAAAAAAABAA
Wir brauchen aber weder Informationen über das derzeitige Google-Logo, noch Context-Infos. Generell kann alles entfernt werden, was nichts mit dem Video selbst zu tun hat. Wir brauchen daher nur zwei Dinge:
- Code: Alles auswählen
http://www.youtube.com/watch?
und
- Code: Alles auswählen
v=1cJbU-w2sec
Sobald in der URL "v=" irgendwo steht - und es ist nicht immer direkt hinter "watch" im Link zu finden - könnt ihr sicher sein, dass die nachfolgende wirre Zeichenkolonne bis zum nächsten "&" die Video-ID darstellt. In unserem Fall wäre also
- Code: Alles auswählen
http://www.youtube.com/watch?v=1cJbU-w2sec
völlig ausreichend. Mehr Informationen braucht der Link nicht und er wird trotz der fehlenden Features, die oben noch im Link sind, alles tadellos auf YouTube anzeigen.
Ich hoffe, dass diese Erklärung einfach genug war, um sie auch als absoluter Laie zu verstehen. Wenn ihr trotzdem Fragen habt, dann stellt diese gleich hier drunter.
Ist das kompliziert!
Vielleicht wird sich das der ein oder andere in Anbetracht eines Fünf-Schritte-Plans zum Einbetten denken. Es gibt aber eben genug Forenmitglieder mit unzureichenden oder völlig fehlenden HTML- & BBCode-Kenntnissen. Und deshalb habe ich versucht, den Quellcode so einfach wie möglich zu halten. Einige werden mir das nicht glauben und schreiben wollen: "Wir müssen ja trotzdem so viel eingeben, damit ein Video endlich angezeigt wird." Aber was ist denn schon weiter zu tun, als die Video-ID zwischen die youtube-Klammern zu setzen und die Anzeigegröße zu erstellen? Rein objektiv betrachtet.
Wölltet ihr wirklich ein Video über HTML einfügen? Ich denke kaum. Oder blickt hier einer von euch durch?:
- Code: Alles auswählen
<object><embed src="http://www.youtube.com/v/{IDENTIFIER}?version=3&hl=de_DE" type="application/x-shockwave-flash" width="{NUMBER1}" height="{NUMBER2}" allowscriptaccess="always" allowfullscreen="true"></embed></object>
Ein paar Sachen könntet ihr sicher mit euren Englischkenntnissen übersetzen. Aber ihre Funktion im Code wäre euch nach wie vor ein Rätsel. Und der Code sieht natürlich gleich viel einfacher aus (Der Satz kann Spuren von Sarkasmus enthalten und ist nicht für Sarkamusallergiger geeignet.)
Ich alter Illuminat verschleier euch all diesen Code. Ich übler Schuft. Ihr bekommt nur das hier zu sehen:
- Code: Alles auswählen
[youtube {NUMBER1} {NUMBER2}]{IDENTIFIER}[/youtube]
Und da sind drei Werte auch noch von Hand einzutragen.
NUMBER1 steht für die Breite, NUMBER2 für die Höhe und IDENTIFIER für die Video-ID. Die geschweiften Klammern entfallen. Sie dienen lediglich dem Programm, dass aus euren Textboxen auf wundersame Weise einen Foreneintrag zaubert, dazu, zwischen Tag (ausgesprochen "Teck", eckige Klammern) und den Variablen (geschweifte Klammern) zu unterscheiden.
Aber ich habe euch damit eigentlich die Sache stark vereinfacht. Die ganzen fünf Schritte hier nocheinmal zusammengefasst.
- Ihr kopiert die VideoURL.
- Ihr nehmt davon die Video-ID.
- Ihr markiert diese und klickt auf den Button "youtube".
- Ihr geht in die vorderte eckige Klammer hinter das Wort YouTube.
- Ihr tragt dort, mit Freizeichen getrennt, Breite und Höhe ein.