Skip to content

Instantly share code, notes, and snippets.

@brichards
Created January 3, 2014 14:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save brichards/8239011 to your computer and use it in GitHub Desktop.
Save brichards/8239011 to your computer and use it in GitHub Desktop.
Make all WP oEmbedded videos responsive.
<?php
/**
* Wrap an embedded video with a container for simpler styling.
*
* @since 1.0.0
*
* @param string $output HTML Markup.
* @param string $url oEmbed URL.
* @return string Potentially modified HTML markup.
*/
function my_theme_oembed_video_wrapper( $output, $url ) {
// Setup list of providers to filter
$video_providers = array(
'youtu\.?be',
'vimeo',
'hulu',
'viddler',
'wordpress\.tv',
'funnyordie',
'slideshare',
'dailymotion',
);
// If oembed is from a provider, wrap it
if ( preg_match( '/' . implode( '|', $video_providers ) . '/', $url ) ) {
$output = '<div class="video-wrapper">' . $output . '</div>';
}
// Return output
return $output;
}
add_filter( 'embed_oembed_html', 'my_theme_oembed_video_wrapper', 10, 2 );
/**
* Make sure embeds and iframes fit their containers
* Source: http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
*/
.video-wrapper { /* 16:9 */
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.video-wrapper embed,
.video-wrapper object,
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment