How to overwrite youtube embed?

3 Views

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

Read More

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?

Post Views: 3

Related posts

1 comment

  1. 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

Comments are closed.