Skip to content

Instantly share code, notes, and snippets.

@pthurmond
Last active January 7, 2022 21:05
Show Gist options
  • Save pthurmond/a71dec661d8b62320037b3b34453b5f3 to your computer and use it in GitHub Desktop.
Save pthurmond/a71dec661d8b62320037b3b34453b5f3 to your computer and use it in GitHub Desktop.
Pause YouTube videos on slide change. Example with SwiperJS and Drupal 9.

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

// 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":""}', '*');
}
});
}
});
<?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;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment