Make WordPress Core

Opened 12 years ago

Closed 10 years ago

#21540 closed enhancement (fixed)

Add support for responsive video embeds

Reported by: obenland's profile obenland Owned by: viper007bond's profile 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)

#1 @cais
12 years ago

  • Cc edward.caissie@… added

#2 @tillkruess
12 years ago

  • Cc me@… added

#3 @Mamaduka
11 years ago

  • Cc georgemamadashvili@… added

#4 @Viper007Bond
11 years 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?

#5 @mkokes
11 years 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 11 years ago by mkokes (previous) (diff)

#6 @ocean90
10 years ago

#25390 was marked as a duplicate.

#7 @wonderboymusic
10 years 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.