Responsive video (wordpress)

Add support of responsive video embeds.

<?php
/**
 * Add support of responsive video embeds.
 */
if (class_exists('Classic_Editor')) {
  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/',
      );
      $video_patterns = '['.implode('|', $video_patterns).']';
      if (1 === preg_match($video_patterns, $url)) {
        $html = '<p class="video-wrapper">'.$html.'</p>';
      }
    }
    return $html;
  }, 10, 2);
}
?>

functions.php

.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