Wie bindet man YouTube-Videos in Typo3 ein?

Marc Schätzle

Mi, 10. Januar 2007 um 16:30 Uhr

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 hierkö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:

  • 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

  • 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:

  • You Tube URL
  • Width
  • 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.: http://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: http://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:

            This subpart is used to display single news items-->


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:
                             
425" height=" 350 "> 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.