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 Psr\Http\Message\ServerRequestInterface;
use TYPO3\CMS\Core\Http\ApplicationType;
use TYPO3\CMS\Core\Localization\LanguageService;
use TYPO3\CMS\Core\Localization\LanguageServiceFactory;
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;

class CookiemanYoutubeRenderer extends YouTubeRenderer implements FileRendererInterface
{
    protected ServerRequestInterface $request;
    protected ?LanguageService $languageService = null;

    public function __construct()
    {
        $this->request = $GLOBALS['TYPO3_REQUEST'];

        if (!$this->isBackend()) {
            $this->languageService = GeneralUtility::makeInstance(LanguageServiceFactory::class)
                ->createFromSiteLanguage(
                    $this->request->getAttribute('language')
                );
        }
    }

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

    public function render(
        FileInterface $file,
        $width,
        $height,
        array $options = []
    ): 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 text-grey bg-white p-4 rounded-lg">' . $buttonText . '</button></p>
                        </div>
                    </div>
                    update <iframe hidden data-src="%s"%s></iframe>
                </div>
            ',
            htmlspecialchars($src, ENT_QUOTES | ENT_HTML5),
            empty($attributes) ? '' : ' ' . $this->implodeAttributes($attributes)
        );
    }

    private function isBackend(): bool
    {
        return ApplicationType::fromRequest($this->request)->isBackend();
    }

    private function sL(string $string): string
    {
        return $this->languageService?->sL($string) ?? $string;
    }
}

packages__configure_cookieman__Configuration__TypoScript__Setup__TrackingObjects__Youtube.typoscript

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

plugin.tx_cookieman {
  settings {
    trackingObjects {
      YouTube {
        inject = TEXT
        inject {
          insertData = 1
          value (
<script nonce="{request : nonce | value}" src="/{path : 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>