Responsive video (wordpress)

Add support for responsive video embeds.

<?php
/**
 * Add support for responsive video embeds.
 */
add_filter('embed_oembed_html', function($html, $url) {
  if (false === strpos($html, '<div class="jetpack-video-wrapper">')) {
    $video_patterns = array(
      'https?://((m|www)\.)?youtube\.com/watch',
      'https?://((m|www)\.)?youtube\.com/playlist',
      'https?://youtu\.be/',
      'https?://(.+\.)?vimeo\.com/',
      'https?://(www\.)?dailymotion\.com/',
      'https?://dai.ly/',
      'https?://(www\.)?hulu\.com/watch/',
      'https?://wordpress.tv/',
      'https?://(www\.)?funnyordie\.com/videos/',
      'https?://vine.co/v/',
      'https?://(www\.)?collegehumor\.com/video/',
      'https?://(www\.|embed\.)?ted\.com/talks/',
    );
    $pattern = '#(?:'.implode('|', $video_patterns).')#i';
    if (1 === preg_match($pattern, $url)) {
      $html = '<div class="video-wrapper">'.$html.'</div>';
    }
  }
  return $html;
}, 10, 2);
?>

functions.php

Responsive 16:9 video wrapper styles.

.video-wrapper {
  position: relative;
}
.video-wrapper:before {
  content: "";
  display: block;
  padding-bottom: 56.25%;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

style.css

< toolbox