Autoembeds - preserve embed ratio on responsive designs

[Looimaster]

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.

[Looimaster]

Mistyped point two. It should be:

"2) Preserve pixel ratio with JavaScript."

[helen]

Related: #21480

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

[Looimaster]

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);
		}
	}
});

[Looimaster]

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.

[ocean90]

Duplicate of #21540.