Make WordPress Core

Opened 10 years ago

Closed 10 years ago

#25390 closed enhancement (duplicate)

Autoembeds - preserve embed ratio on responsive designs

Reported by: looimaster's profile Looimaster Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.6.1
Component: Embeds Keywords:
Focuses: Cc:


I think that most people can live with the fact that on 1280px wide website ($content_width = 1280;) 16:9 YouTube video will be displayed as roughly 1280x720px iframe but on responsive resolution (viewport width = 320px) this becomes 320x720px if a video has max-width: 100%; added.

That's more or less fine.

But if I use columns shortcodes then I end up with 320x720px video even in desktop view which looks like that:

For the time being I'm using PHP and JavaScript to fix this:
1) Add special CSS class to all embeds.
2) Preserve pixel ratio with CSS.

Change History (6)

#1 @Looimaster
10 years ago

Mistyped point two. It should be:

"2) Preserve pixel ratio with JavaScript."

#2 @helen
10 years ago

Related: #21480

Unclear what core could do to support this across various media providers across all themes.

#3 @Looimaster
10 years ago

I don't know but it doesn't look nice that it doesn't maintain the correct ratio. I use this on window resize and it works:

jQuery('.content-area > article iframe').each(function(){
	var width = jQuery(this).attr('width');
	var height = jQuery(this).attr('height');
	if(width && height){
		var current_width = jQuery(this).width();
		var current_height = jQuery(this).height();
		var current_ratio = current_width/current_height;
		var ratio = width/height;
		if(ratio != current_ratio){
			jQuery(this).height((jQuery(this).width() * height)/width);

#4 @nacin
10 years ago

  • Component changed from General to Embeds

#5 @Looimaster
10 years ago

Quick update: the solution I proposed above works fine for YouTube and Vimeo but other embeds like SoundCloud shouldn't maintain the same aspect ratio and yet other iframes (like even require reload to display properly on lower resolutions.

So, perhaps this can't be fixed in the core and should be left as is.

#6 @ocean90
10 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from new to closed

Duplicate of #21540.

Note: See TracTickets for help on using tickets.