zur Startseite
Passwort vergessen?
 

 

Wie bindet man YouTube-Videos in Typo3 ein?

Vor gut zwei Monaten haben wir bekanntlich unser Content Management System (CMS) gewechselt und sind von WordPress auf Typo3 umgestiegen. Beide Systeme sind Open Source, für beide Systeme existieren eine Vielzahl kostenloser Erweiterungen (Plugins bzw. Extensions). Für alle, die sich mit YouTube die Finger wund hacken und nicht stundenlang im Internet nach HowTo's umsehen können, hier ein kleines Video-Tutorial: Wie binde ich ein YouTube Video in Typo3 ein?

Es gibt genau eine einzige Extension mit der sich YouTube-Videos in Beiträgen integrieren lassen: Die Extension heißt ttnews_youtube, und hier könnt ihr sie downloaden. Ihr könnt sie auch direkt in Typo3 installieren, was ich einfacher finde. Hierzu den Extension Manager im Backend benutzen. Es gibt zwei Wege:
  1. Im Dropdown-Menu "Import Extensions" anwählen, den Namen der Extension eingeben, auswählen und installieren. Sollte sie nicht aufgelistet werden, auf den Button Retrieve/Update klicken. Nun wird die Extension geladen und kann durch einen Klick installiert werden. ODER

  2. Nachdem man die Extension vom Repository (Typo3 Extension Behälter) auf seinen Rechner gedownloaded hat, das File direkt bei "Upload extension file directly (.t3x):" über den Button Durchsuchen installieren.



Nach der Installation erscheinen beim Verfassen neuer Beiträge im Reiter  Extra Fields drei zusätzliche Felder (siehe Screenshot oben), über die ihr YouTube-Videos einbinden könnt:
  1. You Tube URL
  2. Width
  3. Height.
Als URL gebt ihr die URL des zu verlinkenden YouTube-Videos ein (auf keinen Fall den - Befehl!!).

WICHTIG:
  • Die URL von YouTube kann von Typo3 in der Form nicht korrekt interpretiert werden.
  • Um das Video in Typo3 abspielen zu lassen, muss aus der YouTube-URL (z.B.: www.youtube.com/watch?v=cEZsB3sQLnY ) das fett markierte /watch?v= durch ein /v/ ersetzt werden.
  • Der korrekte, in das Typo3-Backend-Feld einzufügende Link sieht also dann so aus: www.youtube.com/v/cEZsB3sQLnY.



In Width dann noch die maximale Breite und Height die maximale Höhe eingeben, die euer Video online an Platz verbrauchen darf.

Nun muss Typo3 noch mitgeteilt werden wo es das Video ausgeben soll. Hierzu öffnet ihr euer tt_news.html-Template. Dort sucht ihr die Stelle an der steht:



Hier fügt ihr dann den für YouTube relevanten Typo3-Code ###YOUTUBEVIDEO### an die Stelle ein, wo das Video ausgegeben werden soll. Beispiel nach dem Content:

###NEWS_CONTENT###
###YOUTUBEVIDEO### 


Fertig!

Der einfache Weg besteht darin in sogenannte HTML-Page Contents, oder in die Sidebars, wo man HTML einstellen kann, bspw. eine YouTubeVideo-Box zu erstellen. Hierfür nimmt man lediglich den -Befehl von YouTube, der rechts neben jedem Video steht:
                               
<object width="425" height="350"><embed src="http://www.youtube.com/v/qwCOUgjECtI" type="application/x-shockwave-flash" width="425" height="350">


und fügt diesen dort ein. Nun noch die Paramter width und height zwei Mal anpassen und ebenfalls voilá, fertig.

So sieht's dann z.B. in einem Artikel aus, in dem das Video als Contentelement Platz gefunden hat: Klick

Ich hoffe, das Tutorial ist verständlich. Viel Spaß damit.




Artikel auf Facebook weiterempfehlen Artikel twittern Diese Seite zu Mister Wong hinzufügen Diesen Artikel bei del.icio.us bookmarken
 
von marc | 10.01.07, 16:30 | Kommentare (7)
Weitere Artikel zu: Internet, Typo3, YouTube, Videos, Tutorial, -marc



Kommentare
Anzahl der Kommentare: 7
Lucy
Samstag, 20.01.07 18:45
 

Hallo, hörte sich alles ganz einfach an, aber leider mach ich da wohl doch was falsch, sorry, bin noch Typo3-Neuling.

Also, ich habe die Extension ttnews_youtube aus dem Repository gedownloaded und installieren. Soweit so gut.

Allerdings erscheint beim Verfassen neuer Beiträge kein Reiter "Extra Fields" und somit auch keine drei zusätzliche Felder über die ich YouTube-Videos einbinden könnte :-(.

Habe ich vielleicht das falsche News-Modul (mininews)? Wenn ja, welches wäre das Richtige und wie kann ich updaten. Sind dann meine bisherigen Einträge weg?

Fragen über Fragen - wäre super wenn Du mir helfen könntest.

Viele Grüße, Lucy

gina
Montag, 19.03.07 10:31
 

hi. für timtab gibt's was cooles von frank nägler:
http://weblog.frank-naegler.de/nc/-/weblog/article/neue-extension-fuer-timtab.html
das funzt für googlevideo, youtube, sevenload...
aloha gina

florian
Montag, 28.05.07 20:02
 

Hey! Klappt super mit der Youtube Ext. Wie kann ich die YOutube Videos genauso anordnen, wie Bilder in meiner SingleView...? Also Quasi recht NEBEN dem Text, nicht drüber unter drunter...

Danke
Florian

marc(fudder)
Freitag, 10.08.07 15:19
 

@ Lucy: gut ein halbes jahr später.... ;-) wahrscheinlich hast du die Lösung schon lange. Du musst das Newsmodul tt_news verwenden.

@ florian: dazu müsstest du in deinem Template für die News Singleansicht Änderungen vornehmen. (wahrsch. auch CSS) Dort gibt's ja die Anordnung Template List/Latest/Single. Dort unter der Singleansicht einzelne Typoscript Befehle ###youtube### mit div-styles versehen/ändern.

Mirjam
Dienstag, 06.11.07 12:57
 

Hi Marc,

ich versuche gerade, ein paar YouTube Videos in unsere Website einzubinden. Wir verwenden typo3 und auf der Suche nach einem Tutorial bin ich bei dir gelandet. Ich habe soweit auch alles verstanden, nur an einem Punkt hakt es: Nachdem ich die Extension im EXT Manager installiert habe, tauchen bei mir trotzdem nicht diese drei Felder auf, von denen du schreibst. Was meinst du mit dem Reiter "Extra Fields"? Ich finde den nirgends. Lucys Frage und deine Antwort haben mir auch nicht weitergeholfen. Welche Schritte muss ich GENAU machen?

Bitte, bitte, es ist dringend!! Danke schonmal!
Mirjam

alex
Dienstag, 06.11.07 14:05
 

Ich bin leider typo3 Neuling und habe nicht verstanden, wie man ein Video in den normalen Text einbinden kann.
Was muss ich genau tun um beim editieren eines Textes den embedded Youtube Coder einzubinden.
Wenn ich es im Editor mache ist das Video nach dem Abspeichern weg.
Bisher nehme ich einfach das Google Adsense Plugin und füge den Code dort ein, das funktioniert.
Aber das kann es doch nicht sein. Bitte höflich um genauere Anweisungen.

Joe
Dienstag, 18.01.11 18:06
 

Hallo

ich hoffe es kann mir jemand mal helfen ! Ich habe alles so gemacht wie oben beschrieben, bin eigentlich auch kein Typo3 Anfänger aber mein Video wird leider nicht angezeigt im Frontend ! Wird nur eine leere Stelle dargestellt !Hat jemand eine Lösung ???????????

Um einen Kommentar zu verfassen, benötigst du ein fudder-Profil. Registriere dich kostenlos oben rechts auf fudder.






Diese Funktion steht nur für eingeloggte fudder-User zur Verfügung.

» fudder-Netiquette





» Marks

re: Was hört ihr gerade?
sind mir hier grad zuviel...

» Layana

re: Geschenkidee für Mutti
Hi, Uhh scharf, v...

» Lieselotte

re: Lieblingsbuch
Ich lese gerne mehrgleisi...

» Lieselotte

re: "Laptop" für die Uni
Ich bin viel zu lange mit...

» Lieselotte

re: re: Was hört ihr gerade?
Oh, den find' ich auc...

» Lieselotte

re: re: re: Schuhe zum Ausgehen: Angesagte "Allrounder"?
Da kann ich absolut ...

» Lieselotte

Geschenkidee für Mutti
Hola ihr Lieben, ich suc...

» Lieselotte

re: Suche Kellerraum o.ä. für analogen Fotolabor
Hey Kilian! Vielleicht se...

» Lieselotte

re: Fusion Festival 2014: Live & DJ-Sets
Also ich bin ebenfalls au...

» Lieselotte

re: Sojaprodukte - gesunde Ernährung?
@Bella92, ja, da hast du ...