WordPress.org

Make WordPress Core

Opened 7 months ago

Closed 3 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 Looimaster7 months ago

Mistyped point two. It should be:

"2) Preserve pixel ratio with JavaScript."

comment:2 helen7 months ago

Related: #21480

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

comment:3 Looimaster7 months 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 nacin3 months ago

  • Component changed from General to Embeds

comment:5 Looimaster3 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 ocean903 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.