typo3typo3-9.xtypo3-8.xtypo3-extensionstypo3-11.x

How to replace src with data-src in TYPO3's YouTube iframe tag?


In order to use the "Klaro! Consent Manager" I need to modify the iframe-tag a little bit, which is automatically generated by TYPO3 when you embed a YouTube video with a textmedia element.

It is generated in /typo3/sysext/core/Classes/Resource/Rendering/YouTubeRenderer.php

public function render(FileInterface $file, $width, $height, array $options = [], $usedPathsRelativeToCurrentScript = false)
{
    $options = $this->collectOptions($options, $file);
    $src = $this->createYouTubeUrl($options, $file);
    $attributes = $this->collectIframeAttributes($width, $height, $options);

    return sprintf(
        '<iframe src="%s"%s></iframe>',
        htmlspecialchars($src, ENT_QUOTES | ENT_HTML5),
        empty($attributes) ? '' : ' ' . $this->implodeAttributes($attributes)
    );
}

I already have a user_site extension to configure the system and edit the templates, but without any php classes. It looks like I can't just overwrite a fluid template here. I'm an integrator, not an extension developer, and i wonder how i can overwrite or extend this function accordingly, without changing or duplicating too much of the core functions.

How can I replace <iframe src= with <iframe data-name="youtube" data-src=?


Solution

  • Thanks to the comment from nstungcom I have found good samples in the extension media2click and was able to modify the iFrame tag with fragments of this. Since I am not an extension developer, this solution should be used with caution until it is confirmed by a developer. Suggestions for improvement are very appreciated.

    I made the following changes / additions to my sitepackage ("user_site" extension):

    /ext/user_site/Classes/Resource/Rendering/YouTubeRenderer.php

    <?php
    namespace MyVendorName\UserSite\Resource\Rendering;
    
    use TYPO3\CMS\Core\Core\Environment;
    use TYPO3\CMS\Core\Resource\FileInterface;
    use TYPO3\CMS\Core\Resource\FileReference;
    use TYPO3\CMS\Core\Utility\GeneralUtility;
    use TYPO3\CMS\Frontend\ContentObject\ContentObjectRenderer;
    
    class YouTubeRenderer extends \TYPO3\CMS\Core\Resource\Rendering\YouTubeRenderer
    {
        public function getPriority()
        {
            return 25;
        }
    
        public function render(FileInterface $file, $width, $height, array $options = [], $usedPathsRelativeToCurrentScript = false)
        {
            $options = $this->collectOptions($options, $file);
            $iframe = str_replace(' src="', ' src="" data-name="youtube" data-src="', parent::render($file, $width, $height, $options, $usedPathsRelativeToCurrentScript));
            return $iframe;
        }
    }
    

    I'm uncertain if all of those use statements and the getPriority function are really necessary.

    /ext/user_site/ext_localconf.php

    <?php
    defined('TYPO3_MODE') or die();
    
    call_user_func(function () {
    
        /* TYPO3 < 11 */
        $rendererRegistry = \TYPO3\CMS\Core\Resource\Rendering\RendererRegistry::getInstance();
        /* TYPO3 11
        $rendererRegistry = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\Resource\Rendering\RendererRegistry::class);
        */
        $rendererRegistry->registerRendererClass(\MyVendorName\UserSite\Resource\Rendering\YouTubeRenderer::class);
    });
    

    I do not know if this is a so-called XCLASS. The syntax looks different from what I found as an example in the Api.

    /ext/user_site/ext_emconf.php

    <?php
    $EM_CONF[$_EXTKEY] = [
        'title' => 'Project specific configuration and templates',
        // [...]
        'autoload' => [
            'psr-4' => [
                'MyVendorName\\UserSite\\' => 'Classes',
            ],
        ],
    ];
    

    Apparently it needed this autoload, whatever that's for.