SAY HELLO EN

 

TYPO3 Tipps:

Youtube Video in TYPO3 responsive einbinden 

 

 

Wer über das Standardelement Media 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 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>

 

 

 

Bei Fragen wenden Sie sich an die Webdesign und Internetagentur aus Hannover.

TYPO3 Referenzen der Internetagentur & Webdesign aus Hannover

Auch interessant

Viele weitere TYPO3 Tipps, die weiter helfen:

Klicken Sie hier...

Typo3 Internetagentur Tipps Hannover
Gemeinsam
Neues schaffen.
Kontakt
Ich freue mich, von Ihnen zu hören. Schreiben Sie mir eine Mail oder rufen Sie einfach an.

Internet Experte Typo3 Jan Engelking

Jan Engelking
Dipl.-Designer & Inhaber

T +49 511 8 999 267
jan.engelking-at-dbje.de

Adresse
DbjE Design Marketing IT & Kollegen
Hanomaghof 2
30449 Hannover
T +49 511 59 068 388

© 2005 - 2023 DBJE Design Marketing IT /  Youtube Responsive einbinden TYPO3 Webdesign Internetagentur Typo3 Hannover / Impressum Datenschutz