Responsive integration of YouTube videos

TYPO3 Tipps

Unfortunately, the standard TYPO3 content element is not displayed in responsive design. Hence this small workaround.

If you embed a YouTube video via the standard Media element, you will notice that it is not displayed responsively for all end devices.

The display is incorrect for use in grid elements and the display of smartphones.

Workaround for "Responsive Design"
In principle, a div around the iframe supplied by Youtube is sufficient.

.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%;
}

The content element html of TYPO3 must then be wrapped around the div with the iframe of Youtube:

<div class="youtube-container"><iframe src="https://www.youtube-nocookie.com/embed/LJUaJ5PSXGE?rel=0"  frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

Create YouTube content element via mask

The mask extension makes it very easy to create your own content elements and make them available to the editor.

All you actually need to do is create an HTML element, which is then wrapped with the div mentioned above.

An element "Content" is inserted in mask and this is then restricted to the content element HTML.

The template created by Mask now only needs to be supplemented with the div.

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

Version: <= 10.xx

Back