In the Cookies Video module, Use thumbnail image as background

Here's how we accomplished this for our project in a custom module. Maybe this will help someone or stimulate the brain cells.

First, add the Drupal oembed thumbnail to the iframe.

/**
 * Implements hook_preprocess_HOOK() for fields.
 */
function YOURMODULE_preprocess_field(&$variables) {
  $formatter = $variables['element']['#formatter'];
  if ($formatter === 'oembed') {
    /** @var \Drupal\media\Entity\Media */
    $media = $variables['element']['#object'];
    /** @var \Drupal\file\Entity\File */
    $thumbnail = $media->get('thumbnail')->entity;
    /** @var \Drupal\Core\File\FileUrlGeneratorInterface */
    $file_url_generator = \Drupal::service('file_url_generator');
    foreach (Element::children($variables['items']) as $item) {
      if ($thumbnail_uri = $thumbnail->getFileUri()) {
        $thumbnail_path = $file_url_generator->generateString($thumbnail_uri);
        $variables['items'][$item]['content']['#attributes']['data-thumbnail'] = $thumbnail_path;
        $variables['items'][$item]['content']['#attached']['library'][] = 'YOURMODULE/remote_video';
      }
    }
  }

Then, move the thumbnail image to the cookies overlay as a background-image with JS.

/**
 * @file
 * Handles cookie consent events for remote videos.
 */
(function (Drupal, $) {
  'use strict';

  var videoSelectors = 'iframe.media-oembed-content.cookies-video';

  Drupal.behaviors.YOURMODULECookiesRemoteVideo = {

    consentDenied: function (context) {
      $(videoSelectors, context).each(function (i, element) {
        if (element.dataset.thumbnail) {
          let wrapper = element.closest(".cookies-fallback--video--wrap")
          if (wrapper) {
            wrapper.style.backgroundImage = "url(" + element.dataset.thumbnail + ")";
          }
        }
      });
    },

    attach: function (context) {
      var self = this;
      document.addEventListener('cookiesjsrUserConsent', function (event) {
        var service = (typeof event.detail.services === 'object') ? event.detail.services : {};
        if (typeof service.video !== 'undefined' && !service.video) {
          self.consentDenied(context);
        }
      });
    }
  };

})(Drupal, jQuery);

Add a bit of CSS to blur and lighten the background-image.

.cookies-fallback--video--wrap {
  background: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.cookies-fallback--video--overlay {
  background: #ffffff99;
  backdrop-filter: blur(4px);
  border: none;
}

bwaindwain, very interesting code. I played around with that a bit but couldnt see hwo it works.
The function "YOURMODULE_preprocess_field(&$variables) {" should render the thumbnail next to the video right?

@marcoka The YOURMODULE_preprocess_field() adds the thumbnail URL as a data-thumbnail attribute on the <iframe>. Then the JS gets the image URL and applies as a background-image style to the parent <div>.