Responsive layout of externally hosted web-content, embedded into Canvas with an iframe, is impossible under the current CSS allowlist restrictions. Allowing the use of the "aspect-ratio" CSS property would solve this for embedded, responsive content with a known, fixed aspect-ratio.
Currently, the iframe's width property can be set to 100% to cover the viewport left-to-right, but the height property must be set as explicit pixel-value. This breaks responsive content layouts that attempt to fill the viewport without overflowing in either direction.
For example, I have programmed and hosted collection of interactive modules to support instruction... little widgets for students to interact with as part of the learning experience, adding a "hands on" element to the online learning environment. I don't want the buttons to be smaller than necessary, so the content tries to be as big as possible. I also don't want to a student to have to scroll within an iframe to find a button, or to have the result of the interaction happen outside the viewport, so the content adjusts to stay within the bounds of the viewport.
Setting the iframe's width="100%" gives the content as much space as possible in that direction, which the content can observe, but then there's nothing to do about the height. Set a large number and get an unnecessary scrolling context, or set a small number and the student has to scroll inside iframe. Magic-number it to work at my desk, and it will be garbage on a student's phone.
Allowing the "aspect-ratio" CSS property would solve this issue. The content has a defined aspect ratio and can observe the width of the iframe. Setting the aspect-ratio of the iframe to match the content, would result in the iframe and the content scaling responsively within the Canvas page. This would result in a simple and clean layout, and a much better experience for students.
The aspect-ratio property has full browser support, and I can't imagine any other barriers to allowing its use in course content layout.
This might be a niche problem, but the solution is so simple and already proven... the rich content editor doesn't strip disallowed CSS properties until the page is saved, so I know this works.
