How to overwrite youtube embed?
문제
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