WordPress.org

Make WordPress Core

Opened 21 months ago

Last modified 3 months ago

#21540 assigned enhancement

Add support for responsive video embeds

Reported by: obenland Owned by: Viper007Bond
Milestone: Awaiting Review 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 (6)

comment:1 cais21 months ago

  • Cc edward.caissie@… added

comment:2 tillkruess21 months ago

  • Cc me@… added

comment:3 Mamaduka19 months ago

  • Cc georgemamadashvili@… added

comment:4 Viper007Bond18 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 mkokes15 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.

Version 0, edited 15 months ago by mkokes (next)

comment:6 ocean903 months ago

#25390 was marked as a duplicate.

Note: See TracTickets for help on using tickets.