Last active
April 22, 2018 14:14
-
-
Save m-e-h/9212923a99f4dc78a91d4119668a64c2 to your computer and use it in GitHub Desktop.
Responsive video embeds for WP
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Flexible media embeds | |
* | |
* For use with media embeds – such as videos, slideshows, or even images – | |
* that need to retain a specific aspect ratio but adapt to the width of their | |
* containing element. | |
* | |
* Based on: http://alistapart.com/article/creating-intrinsic-ratios-for-video | |
*/ | |
.entry-content .FlexEmbed { | |
margin-bottom: var(--base-space); | |
} | |
.FlexEmbed { | |
display: block; | |
overflow: hidden; | |
position: relative; | |
} | |
/** | |
* The aspect-ratio hack is applied to an empty element because it allows | |
* the component to respect `max-height`. Default aspect ratio is 1:1. | |
*/ | |
.FlexEmbed-ratio { | |
display: block; | |
padding-bottom: 100%; | |
width: 100%; | |
} | |
/** | |
* Modifier: 3:1 aspect ratio | |
*/ | |
.FlexEmbed-ratio--3by1 { | |
padding-bottom: calc(100% / 3); | |
} | |
/** | |
* Modifier: 2:1 aspect ratio | |
*/ | |
.FlexEmbed-ratio--2by1 { | |
padding-bottom: 50%; | |
} | |
/** | |
* Modifier: 16:9 aspect ratio | |
*/ | |
.FlexEmbed-ratio--16by9 { | |
padding-bottom: 56.25%; | |
} | |
/** | |
* Modifier: 4:3 aspect ratio | |
*/ | |
.FlexEmbed-ratio--4by3 { | |
padding-bottom: 75%; | |
} | |
/** | |
* Fit the content to the aspect ratio | |
*/ | |
.FlexEmbed-content > .wp-video, | |
.FlexEmbed-content > iframe { | |
bottom: 0; | |
height: 100%; | |
left: 0; | |
position: absolute; | |
top: 0; | |
width: 100%; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
add_action( 'after_setup_theme', 'meh_responsive_videos', 99 ); | |
function meh_responsive_videos() { | |
/* Wrap the videos */ | |
add_filter( 'wp_video_shortcode', 'meh_responsive_videos_embed_html' ); | |
add_filter( 'video_embed_html', 'meh_responsive_videos_embed_html' ); | |
/* Only wrap oEmbeds if video */ | |
add_filter( 'embed_oembed_html', 'meh_responsive_videos_maybe_wrap_oembed', 10, 2 ); | |
add_filter( 'embed_handler_html', 'meh_responsive_videos_maybe_wrap_oembed', 10, 2 ); | |
} | |
/** | |
* Adds a wrapper to videos and enqueue script. | |
* | |
* @return string | |
*/ | |
function meh_responsive_videos_embed_html( $html ) { | |
if ( empty( $html ) || ! is_string( $html ) ) { | |
return $html; | |
} | |
return '<div class="FlexEmbed"><div class="FlexEmbed-ratio FlexEmbed-ratio--16by9"></div><div class="FlexEmbed-content">' . $html . '</div></div>'; | |
} | |
/** | |
* Check if oEmbed is a `$video_patterns` provider video before wrapping. | |
* | |
* @return string | |
*/ | |
function meh_responsive_videos_maybe_wrap_oembed( $html, $url = null ) { | |
if ( empty( $html ) || ! is_string( $html ) || ! $url ) { | |
return $html; | |
} | |
$meh_video_wrapper = '<div class="FlexEmbed">'; | |
$already_wrapped = strpos( $html, $meh_video_wrapper ); | |
// If the oEmbed has already been wrapped, return the html. | |
if ( false !== $already_wrapped ) { | |
return $html; | |
} | |
/** | |
* OEmbed Video Providers. | |
* | |
* A whitelist of oEmbed video provider Regex patterns to check against before wrapping the output. | |
* | |
* @module theme-tools | |
* | |
* @since 3.8.0 | |
* | |
* @param array $video_patterns oEmbed video provider Regex patterns. | |
*/ | |
$video_patterns = apply_filters( 'meh_responsive_videos_oembed_videos', 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/', | |
) ); | |
// Merge patterns to run in a single preg_match call. | |
$video_patterns = '(' . implode( '|', $video_patterns ) . ')'; | |
$is_video = preg_match( $video_patterns, $url ); | |
// If the oEmbed is a video, wrap it in the responsive wrapper. | |
if ( false === $already_wrapped && 1 === $is_video ) { | |
return meh_responsive_videos_embed_html( $html ); | |
} | |
return $html; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment