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