WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 20 months ago

#25390 closed enhancement (duplicate)

Autoembeds - preserve embed ratio on responsive designs

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

Description

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:

http://gyazo.com/a593f46723b218c5e35794624e9a8b1d.png

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)

comment:1 @Looimaster2 years ago

Mistyped point two. It should be:

"2) Preserve pixel ratio with JavaScript."

comment:2 @helen2 years ago

Related: #21480

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

comment:3 @Looimaster2 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);
		}
	}
});

comment:4 @nacin20 months ago

  • Component changed from General to Embeds

comment:5 @Looimaster20 months 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 blip.tv) 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.

comment:6 @ocean9020 months 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.