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

or

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

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

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

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

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

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

• php
• functions
• filters
• embed
• videos

1 Answer 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/ 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/support/topic/adding-a-wrapping-div-to-video-embeds?replies=2