Responsive Videos einbinden
Ab TYPO3 7 LTS können Videos im Inhaltselement Text & Medien eingebunden werden. Hier ein einfacher Trick um sie responsive zu machen.
Mit Standard Inhaltselementen von fluid_styled_content kann man jetzt einfach Videos in den Inhalt einbinden. Leider sind diese nicht responsive. Das bedeutet, dass wenn sich die Bildschirmauflösung verkleinert z.B. bei einem Smartphone, so verkleinert sich das Video nicht und es ist nur noch ein Teil sichtbar.
Durch eine kleine Anpassung des Template Partial MediaGallery.html und eine wenig CSS kann dem Abhilfe geschaffen werden.
Kopie der Template-Datei erstellen
Da man keinesfalls die Original-Dateien von fluid_styled_content verändern sollte, muss im ersten Schritt eine Kopie der zu bearbeitenden Datei angelegt werden.
Die Ausgabe der Medien wird über folgende Datei kontrolliert. Hierbei handelt es sich um ein sogenanntes Partial:
typo3_src-12.4.14/typo3/sysext/fluid_styled_content/Resources/Private/Partials/MediaGallery.html
Legen Sie jetzt ein Verzeichnis für das Partial unterhalb von fileadmin/ an, z.B.
fileadmin/Templates/fluid_styled_content/Resources/Private/Partials/
Kopieren Sie die Datei MediaGallery.html aus dem 1. Verzeichnis in das zuvor angelegte Verzeichnis unterhalb von fileadmin/
Nun müssen wir TYPO3 bekannt machen, wo unsere Kopien der Partials liegen. Fügen Sie dazu folgende Zeile in ihr TypoScript-Setup ein:
lib.fluidContent.partialRootPaths.100 = fileadmin/Templates/fluid_styled_content/Resources/Private/Partials/
Die Zahl 100 ist dabei frei gewählt, sie muss aber größer als 10 sein, da 0 und 10 schon von fluid_styled_content verwendet werden!
Partial MediaGallery.html anpassen
In der Datei MediaGallery.html gibt es eine Abfrage ob ein Video eingebunden worden ist, falls dies der Fall ist, wird das Video ausgegeben. Diese Ausgabe muss man mit einem DIV umschließen.
<f:if condition="{column.media.type} == 4">
<div class="responsive-video"><f:render section="videoType" arguments="{_all}" /></div>
</f:if>
CSS anpassen
.responsive-video {
position: relative;
padding-bottom: 55%;
padding-top: 15px;
height: 0;
overflow: hidden;
}
.responsive-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}