I really like how you can just paste a URL right into the post... such as:

http://youtube.com/watch?v=xyz or http://vimeo.com/123456

What I want to do is change the default code for this to support the code from here: http://embedresponsively.com/

How can I go about overwriting the youtube and vimeo code, I'm assuming in functions.php somehow?


Taking a closer look at the code provided on that site, it appears that the main differences with what it output by default by WordPress is the following:

  • the iframe is wrapped with a div that has a class of embed-container
  • there are CSS styles that are used by that class

In WordPress, to wrap the embed iframe, add the following to your theme's functions.php or to a functionality plugin:

add_filter('embed_oembed_html', 'my_embed_oembed_html', 99, 4);
function my_embed_oembed_html($html, $url, $attr, $post_id) {
return '<div class="embed-container">' . $html . '</div>';

and add the CSS generated by http://embedresponsively.com/ to your theme:

.embed-container { 
position: relative; 
padding-bottom: 56.25%; 
padding-top: 30px; 
height: 0; 
overflow: hidden; 
max-width: 100%; 
height: auto;

.embed-container iframe, .embed-container object, .embed-container embed { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%;

I tested the filter and it worked just fine. I did not test the CSS though, that will be up to you to play with.

Source for the filter: http://wordpress.org/support/topic/adding-a-wrapping-div-to-video-embeds?replies=2

  • My pleasure! :)
    – richardmtl
    Feb 14 '14 at 18:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.