WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 2 months ago

#21540 closed enhancement (fixed)

Add support for responsive video embeds

Reported by: obenland Owned by: Viper007Bond
Milestone: 3.9 Priority: normal
Severity: normal Version:
Component: Embeds Keywords:
Focuses: Cc:

Description

By wrapping the html content of a video embed with a container (incl. class name), we could provide a simplified way for Theme authors to make video embeds truly responsive, through basic CSS.

See #21480

Change History (7)

comment:1 cais2 years ago

  • Cc edward.caissie@… added

comment:2 tillkruess2 years ago

  • Cc me@… added

comment:3 Mamaduka22 months ago

  • Cc georgemamadashvili@… added

comment:4 Viper007Bond21 months ago

  • Owner set to Viper007Bond
  • Status changed from new to assigned

This is unfortunately easier said than done because we don't want to wrap all content types, just block types such as videos and images. However only the oEmbed class gets to see what type of content is being returned and it just returns some HTML without any context. This HTML is then cached by the embed class, again without any context.

So we could add wrapping to the oembed class, but that wouldn't affect existing cached data, only posts edited/saved after any change got pushed into core.

I guess that's better than nothing though...

Thoughts?

comment:5 mkokes18 months ago

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.

If you'd like to see a working example you can check out my blog

Last edited 18 months ago by mkokes (previous) (diff)

comment:6 ocean905 months ago

#25390 was marked as a duplicate.

comment:7 wonderboymusic2 months ago

  • Milestone changed from Awaiting Review to 3.9
  • Resolution set to fixed
  • Status changed from assigned to closed

Fixed in default themes in 3.9 via [27622].

Note: See TracTickets for help on using tickets.