Youtube-Videos Responsive einbinden
Wer über das Standardelement Media in TYPO3 ein Youtube-Video einbindet, muss feststellen, dass es nicht responsive für alle Endgeräte dargestellt wird.
Für den Einsatz in Grid-Elementen und der Darstellung von Smartphones ist die Darstellung fehlerhaft.
Workarround zum "Responsive Design"
Im Prinzip reicht ein Div um den von Youtube gelieferten iframe.
.youtube-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.youtube-container iframe,
.youtube-container object,
.youtube-container embed,
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Der im Inhaltselement html von TYPO3 muss dann mit der des Iframes von Youtube um das Div umwrapped werden:
<div class="youtube-container"><iframe src="https://www.youtube-nocookie.com/embed/LJUaJ5PSXGE?rel=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>Youtube Inhaltselement über Mask erstellen
Über die Erweiterung mask kann man sehr einfach eigene Inhaltselemente erstellen, und dem Redakteur zur Verfügung stellen.
Eigentlich erstellt man nur ein Element HTML, welches dann mit dem oben genannten Div ummantelt wird.
Es wird in Mask ein Element "Content" eingefügt und dieses dann auf das Inhaltselement HTML beschränkt.
Das Template, welches von Mask in TYPO3 erstellt worden ist, muss jetzt nur noch um das Div ergänzt werden.
<div class="youtube-container">
<f:if condition="{data.tx_mask_youtube_iframe}">
<f:for each="{data.tx_mask_youtube_iframe}" as="data_item">
<f:cObject typoscriptObjectPath="lib.tx_mask.content">{data_item.uid}</f:cObject>
</f:for>
</f:if>
</div>