Last active
August 29, 2015 14:04
-
-
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 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
/** | |
* 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; |
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
.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