pthurmond · September 9, 2025 15:03 · Jan 7, 2022 · Jan 7, 2022 · Jan 7, 2022 · Jan 6, 2022
diff --git a/README_YouTube_Pause.md b/README_YouTube_Pause.md
@@ -9,3 +9,5 @@ Specifically, the "enablejsapi" parameter is what enables this. I will also shar
 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
diff --git a/YouTubePauseDrupalHookExample.php b/YouTubePauseDrupalHookExample.php
@@ -1,6 +1,5 @@
 <?php
 
-
 /**
  * Implements hook_preprocess_media__BUNDLE__VIEW_MODE() for remote_video, hero.
  */

diff --git a/README_YouTube_Pause.md b/README_YouTube_Pause.md
@@ -5,3 +5,7 @@ This requires one more thing. The YouTube video URL needs parameters to tell it
 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
diff --git a/README.md → README_YouTube_Pause.md b/README.md → README_YouTube_Pause.md
diff --git a/DrupalHookExample.php → YouTubePauseDrupalHookExample.php b/DrupalHookExample.php → YouTubePauseDrupalHookExample.php
diff --git a/DrupalHookExample.php b/DrupalHookExample.php
@@ -0,0 +1,88 @@
+<?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;
+    }
+  }
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,7 @@
+# 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.
diff --git a/SwiperYoutube.js b/SwiperYoutube.js
@@ -0,0 +1,15 @@
+// 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":""}', '*');
+        }
+      });
+    }
+});