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

Reputation: 1031

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

Upvotes: 2

Views: 1125

Answers (1)

Ben
Ben

Reputation: 1031

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.

Upvotes: 4

Related Questions