Created
July 7, 2017 20:19
-
-
Save mateusneves/792552cb72d8e4d19720637b82eb0d17 to your computer and use it in GitHub Desktop.
Add wrapper div to oEmbed WordPress objects
This file contains hidden or 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
// https://gist.github.com/jlengstorf/ce2470df87fd9a892f68 | |
function setup_theme( ) { | |
// Theme setup code... | |
// Filters the oEmbed process to run the responsive_embed() function | |
add_filter('embed_oembed_html', 'responsive_embed', 10, 3); | |
} | |
add_action('after_setup_theme', 'setup_theme'); | |
/** | |
* Adds a responsive embed wrapper around oEmbed content | |
* @param string $html The oEmbed markup | |
* @param string $url The URL being embedded | |
* @param array $attr An array of attributes | |
* @return string Updated embed markup | |
*/ | |
function responsive_embed($html, $url, $attr) { | |
return $html!=='' ? '<div class="embed-container">'.$html.'</div>' : ''; | |
} |
This file contains hidden or 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
.embed-container { | |
position: relative; | |
padding-bottom: 56.25%; | |
padding-top: 30px; | |
height: 0; | |
overflow: hidden; | |
max-width: 100%; | |
height: auto; | |
iframe, object, embed { | |
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