WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 12 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 @cais3 years ago

  • Cc edward.caissie@… added

comment:2 @tillkruess3 years ago

  • Cc me@… added

comment:3 @Mamaduka3 years ago

  • Cc georgemamadashvili@… added

comment:4 @Viper007Bond2 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?

comment:5 @mkokes2 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.

Version 0, edited 2 years ago by mkokes (next)

comment:6 @ocean9015 months ago

#25390 was marked as a duplicate.

comment:7 @wonderboymusic12 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.