Pause YouTube videos on slide change. Example with SwiperJS and Drupal 9.

README_YouTube_Pause.md

Notes

This requires one more thing. The YouTube video URL needs parameters to tell it to accept commands. In my application, which is Drupal 9, I use a hook to modify the URL of all YouTube video URLs.

Example URL: https://www.youtube.com/embed/f5piHKZPoP4?rel=0&autoplay=0&enablejsapi=1

Specifically, the "enablejsapi" parameter is what enables this. I will also share a php file with the Drupal hook I used for this.

To learn more about the optional parameters you can pass, look at this documentation: https://developers.google.com/youtube/player_parameters

To learn more about the iframe API go here: https://developers.google.com/youtube/iframe_api_reference

I also found this example of using the API including play, pause, and stop from Simon Ingeson: https://codepen.io/smonn/pen/gaeVae

SwiperYoutube.js

// This is how you pause a YouTube video on slide change.
let $slider = new Swiper($sliderWrapper, {
  on: {
    slideChange: function (el) {
      $('.swiper-slide').each(function () {
        // Find the YouTube iframe.
        var youtubePlayer = $(this).find('iframe').get(0);

        if (youtubePlayer) {
          // Attempt to send a command to the player to stop the playing of the video.
          youtubePlayer.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
        }
      });
    }
});

YouTubePauseDrupalHookExample.php

<?php

/**
 * Implements hook_preprocess_media__BUNDLE__VIEW_MODE() for remote_video, hero.
 */
function MYSITETHEME_preprocess_media__remote_video(array &$variables) {
  /** @var \Drupal\media\MediaInterface $media */
  $media = $variables['media'];

  // Looking for the fields that contain the media entity to the remote videos.
  if (isset($variables['media_embed'][0]['children']['#type'])) {
    $type = $variables['media_embed'][0]['children']['#type'];

    if ($type == 'video_embed_iframe') {
      // We want to identify the provider.
      $provider = $variables['media_embed'][0]['children']['#provider'];
      $url = $variables['media_embed'][0]['children']['#url'];
      $parsed_url = parse_url($url);

      $options = [];
      $options['query'] = isset($parsed_url['query']) ? parse_str($parsed_url['query']) : [];

      if ($provider == 'youtube') {
        $options['query']['rel'] = 0;
        $options['query']['autoplay'] = 0;
        $options['query']['enablejsapi'] = 1; // This is the critical value for stopping those videos.
        $options['query']['modestbranding'] = 1;
      }
      elseif ($provider == 'vimeo') {
        $options['query']['autoplay'] = 0;
        $options['query']['background'] = 1;
        $options['query']['loop'] = 1;
      }

      /** @var \Drupal\Core\Utility\UnroutedUrlAssemblerInterface $unrouted_url_assembler */
      $unrouted_url_assembler = Drupal::service('unrouted_url_assembler');
      $url = $unrouted_url_assembler->assemble($url, $options, FALSE);

      $variables['media_embed'][0]['children']['#url'] = $url;
    }
  }

  // Make video autoplay, loop and disabling any controls and branding.
  if (isset($variables['media_embed'][0]['#build']['settings']['scheme']) && $variables['media_embed'][0]['#build']['settings']['type'] === 'video') {
    $settings = $variables['media_embed'][0]['#build']['settings'];
    $settings['autoplay'] = TRUE;

    // Make modifications by provider.
    $url = !empty($settings['autoplay_url']) ? $settings['autoplay_url'] : $settings['embed_url'];

    if (UrlHelper::isExternal($url)) {
      $options = [];

      switch ($settings['scheme']) {
        case 'vimeo':
          $options['query']['autoplay'] = 1;
          $options['query']['background'] = 1;
          $options['query']['loop'] = 1;
          $options['query']['muted'] = 1;
          break;

        case 'youtube':
          $options['query']['autoplay'] = 1;
          $options['query']['controls'] = 0;
          $options['query']['disablekb'] = 1;
          $options['query']['fs'] = 0;
          $options['query']['mute'] = 1;
          $options['query']['loop'] = 1;
          $options['query']['enablejsapi'] = 1;
          $options['query']['modestbranding'] = 1;
          $options['query']['playlist'] = $settings['video_id'];
          break;
      }

      // Replace url.
      /** @var \Drupal\Core\Utility\UnroutedUrlAssemblerInterface $unrouted_url_assembler */
      $unrouted_url_assembler = Drupal::service('unrouted_url_assembler');
      $url = $unrouted_url_assembler->assemble($url, $options, FALSE);

      $settings['autoplay_url'] = $url;
      $settings['embed_url'] = $url;

      $variables['media_embed'][0]['#build']['settings'] = $settings;
      $variables['media_embed']['#blazy'] = $settings;
    }
  }
}