Skip to content

Instantly share code, notes, and snippets.

@Manoz
Last active August 29, 2015 14:04
Show Gist options
  • Save Manoz/2218d1ee57d358843aab to your computer and use it in GitHub Desktop.
Save Manoz/2218d1ee57d358843aab to your computer and use it in GitHub Desktop.
Hack the default WordPress video player if you want a width different than the $content_width global.
/**
* This function is the same as str_replace but once
* A small warning: this has not been tested in RSS feeds.
* Thx @ScreenFeedFr for the hack
* @link https://twitter.com/ScreenFeedFr/status/492056927745343489
* @param string $search Value being searched for.
* @param string $replace Replacement value
* @param string $subject String being searched and replaced
* @param boolean $rev I don't fucking know what this var do :)
* @return string Replaced value
*/
if ( !function_exists('pp_str_replace_once') ):
function pp_str_replace_once( $search, $replace, $subject, $rev = false ) {
if ( ! $rev ) {
if ( false !== ( $pos = strpos( $subject, $search ) ) ) {
return substr_replace( $subject, $replace, $pos, strlen( $search ) );
}
} else {
if ( false !== ( $pos = strpos( strrev( $subject ), strrev( $search ) ) ) ) {
return strrev( substr_replace( strrev( $subject ), strrev( $replace ), $pos, strlen( $search ) ) );
}
}
return $subject;
}
endif;
/**
* This is where the magic takes place. Lets build a responsive video player.
* @param string $html Our html code for the player
* @param string $atts height, width attributs
* @param string $video video url
* @param string $post_id the post ID
* @param dunno? $library Don't know what this var do
* @return string Return the html code for the video player with modified values
*/
add_filter( 'wp_video_shortcode', 'pp_responsive_video_hosted', 10, 5 );
if ( !function_exists('pp_responsive_video_hosted') ):
function pp_responsive_video_hosted( $html, $atts, $video, $post_id, $library ) {
if ( !empty($atts['width']) && !empty($atts['height']) && preg_match( '@ style="width: (\d+)px; max-width: 100%;"@', $html, $matches ) ) {
$width = (int) $atts['width'];
$height = (int) $atts['height'];
$padding = round($height * 100 / $width, 2);
// Change padding for non 16/9 videos. Allow 0.02% tolerance.
$replace = abs($padding - 56.21) > .02 ? ' style="padding-bottom:' . $padding . '%"' : '';
$html = pp_str_replace_once( $matches[0], $replace, $html );
}
return $html;
}
endif;
.wp-video {
position: relative;
width: 100% !important;
max-width: 100%;
height: 0;
padding-bottom: 56.21%;
margin-bottom: 1.5em;
clear: both;
}
.wp-video > div,
.wp-video > video {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100% !important;
height: 100% !important;
margin: 0;
}
.mejs-layer,
.wp-video-shortcode {
width: 100% !important;
height: 100% !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment