[wp-trac] [WordPress Trac] #21540: Add support for responsive video embeds

[WordPress Trac]

#21540: Add support for responsive video embeds
-------------------------+------------------------------
 Reporter:  obenland     |       Owner:  Viper007Bond
     Type:  enhancement  |      Status:  assigned
 Priority:  normal       |   Milestone:  Awaiting Review
Component:  Embeds       |     Version:
 Severity:  normal       |  Resolution:
 Keywords:               |
-------------------------+------------------------------

Comment (by mkokes):

 I might be missing something but wouldn't anything being embedded into a
 post be block content or at least treated as such? Tweet, poll, slideshow,
 audio player, etc.

 I've been using the following code in twenty twelve child themes to
 maintain proper aspect ratios on video embeds delivered via oembed.

 within functions.php, this adds a figure with a class of video-container
 and a div with the class of video-wrapper

 {{{
 add_filter( 'embed_oembed_html', 'css_oembed_filter', 10, 4 ) ;

 function css_oembed_filter($html, $url, $attr, $post_ID) {
     $return = '<div class="video-wrapper"><figure class="video-
 container">'.$html.'</figure></div>';
     return $return;
 }
 }}}

 then in the styling I use the following css


 {{{
 .video-container {
         position: relative;
         padding-bottom: 56.25%;
         padding-top: 30px;
         height: 0;
         overflow: hidden;
 }

 .video-container iframe,
 .video-container object,
 .video-container embed {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
 }
 .video-wrapper {
         width: 960px;
         max-width: 100%;
 }
 }}}

 The video-wrapper class is only needed if you want to set a maximum width
 for the video.

-- 
Ticket URL: <http://core.trac.wordpress.org/ticket/21540#comment:5>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software