Gist about implementing Youtube with cookieman

packages__configure_cookieman__Classes__Rendering__CookiemanYoutubeRenderer.php

<?php

declare(strict_types=1);

namespace Dmind\ConfigureCookieman\Rendering;

use Dmind\ConfigureCookieman\Service\YoutubeImageService;
use TYPO3\CMS\Core\Resource\FileInterface;
use TYPO3\CMS\Core\Resource\Rendering\FileRendererInterface;
use TYPO3\CMS\Core\Resource\Rendering\YouTubeRenderer;
use TYPO3\CMS\Core\Utility\GeneralUtility;
use TYPO3\CMS\Frontend\Controller\TypoScriptFrontendController;

class CookiemanYoutubeRenderer extends YouTubeRenderer implements FileRendererInterface
{
    protected ?TypoScriptFrontendController $typoScriptFrontendController;

    public function __construct(?TypoScriptFrontendController $typoScriptFrontendController)
    {
        $this->typoScriptFrontendController = $typoScriptFrontendController;
    }

    public function getPriority(): int
    {
        return 10;
    }

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

        $imageService = GeneralUtility::makeInstance(YoutubeImageService::class);
        $previewUrl = $imageService->getPreviewImage($this->getVideoIdFromFile($file));
        $previewHtml = $previewUrl ? '<img src="' . $previewUrl . '" class="img-fluid">' : '';

        if ($this->isBackend()) {
            return $previewHtml;
        }

        $bannerText = $this->sL(
            'LLL:EXT:configure_cookieman/Resources/Private/Language/locallang.xlf:banner.YouTube.text'
        );
        $buttonText = $this->sL(
            'LLL:EXT:configure_cookieman/Resources/Private/Language/locallang.xlf:banner.YouTube.buttonText'
        );

        return sprintf(
            '
                <div class="cookieman-video-youtube">
                    ' . $previewHtml . '
                    <div class="cookieman-video-banner">
                        <div class="cookieman-video-banner-text">
                            <p>' . $bannerText . '</p>
                            <p><button class="btn btn-primary">' . $buttonText . '</button></p>
                        </div>
                    </div>
                    <iframe hidden data-src="%s"%s></iframe>
                </div>
            ',
            htmlspecialchars($src, ENT_QUOTES | ENT_HTML5),
            empty($attributes) ? '' : ' ' . $this->implodeAttributes($attributes)
        );
    }

    private function sL(string $string): string
    {
        if ($this->isBackend()) {
            return $string;
        }

        return $this->typoScriptFrontendController->sL($string);
    }

    private function isBackend(): bool
    {
        return $this->typoScriptFrontendController === null;
    }
}

packages__configure_cookieman__Configuration__TypoScript__Setup__TrackingObjects__Youtube.typoscript

@import 'EXT:cookieman/Configuration/TypoScript/TrackingObjects/Youtube.typoscript'

plugin.tx_cookieman {
  settings {
    trackingObjects {
      YouTube {
        inject (
          <script src="/typo3conf/ext/configure_cookieman/Resources/Public/JavaScript/trackingobject-youtube-consented.js"></script>
        )
        show {
          YouTube {
            duration =
            durationUnit = none
            type = connection
            provider = YouTube
          }
        }
      }
    }
  }

  _LOCAL_LANG {
    default {
      trackingobject.YouTube.desc = Used to see YouTube content
    }

    de {
      trackingobject.YouTube.desc = Wird hergestellt, um YouTube-Inhalte zu sehen
    }
  }
}

packages__configure_cookieman__ext_localconf.php

<?php

defined('TYPO3') || die();

(static function () {
    // Custom VideoRenderer
    $rendererRegistry = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(
        \TYPO3\CMS\Core\Resource\Rendering\RendererRegistry::class
    );
    $rendererRegistry->registerRendererClass(\Dmind\ConfigureCookieman\Rendering\CookiemanYoutubeRenderer::class);
    $rendererRegistry->registerRendererClass(\Dmind\ConfigureCookieman\Rendering\CookiemanVimeoRenderer::class);
})();

packages__configure_cookieman__Resources__Public__JavaScript__cookieman-video.js

(function () {
  const videoConsentButton = document.querySelectorAll('.cookieman-video-banner button')
  videoConsentButton.forEach(
    el => {
      el.addEventListener(
        "click",
        function () {
          cookieman.consent('externals')
        }
      )
    }
  )
})()

packages__configure_cookieman__Resources__Public__JavaScript__trackingobject-youtube-consented.js

(function () {
  const videos = document.querySelectorAll('.cookieman-video-youtube')
  videos.forEach(
    video => {
      var image = video.querySelector('img')
      image.hidden = true
      var banner = video.querySelector('.cookieman-video-banner')
      banner.hidden = true
      var iframe = video.querySelector('iframe')
      iframe.setAttribute('src', iframe.getAttribute('data-src'));
      iframe.removeAttribute('data-src')
      iframe.removeAttribute('hidden')
    }
  )
})()

packages__configure_fluid_styled_content__Resources__Private__Partials__Media__Rendering__Video.html

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">

<f:asset.css identifier="cookieman-video"
  href="EXT:configure_cookieman/Resources/Public/Css/cookieman-video.css"
/>
<f:asset.script identifier="cookieman-video"
  src="EXT:configure_cookieman/Resources/Public/JavaScript/cookieman-video.js"
/>

<f:media class="video-embed-item" file="{file}" width="{dimensions.width}" height="{dimensions.height}"
  alt="{file.alternative}" title="{file.title}" additionalConfig="{settings.media.additionalConfig}"
/>
</html>