Hi everyone,
I've got several pages and assignments where I use frames to embed videos and interactive resources. But whenever I go into editing, the formatting in some of them breaks down: the video size shrinks down, or I'm left with an empty blank space.
I think I've narrowed down the cause of this issue: Some of these iframes use the "position" style, along with "top" and "left" in order to make the content responsive. For example:
<div style="width: 100%;">
<div style="position: relative; padding-bottom: 56.25%; padding-top: 0px; height: 0px;">
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" title="Test" src="https://www.youtube.com/embed/jfKfPfyJRdk" width="1200" height="675" loading="lazy" allowfullscreen="allowfullscreen" data-mce-fragment="1" aria-hidden="true"></iframe>
</div>
</div>
This works fine for existing content, but whenever I open the content in editing mode, these specific styles are deleted from the HTML automatically. If I save my edits without adressing this issue, the iframes (or any HTML tags that use these styles) will break down due to the lack of these necessary styles.
Good news is that the styles can be added back manually, and they will remain after saving, so that's a workaround. But it's not a solution for the long term; a couple of faculty members have already reported this issue with their courses, and not all of them know or are comfortable editing html. They can insert an iframe embed code (and several services we use have these styles as part of their standard embed codes), but not so easily search in HTML mode for the specific div/iframe tags they need to add these styles in order to fix their course contents.
I know the Canvas editor has tags and styles that are not allowed (like the <script> tag and "box-shadow" style), and while it allows you to place them in editing mode, they're automatically deleted whenever the edits are saved. Which is fine and an already known behavior. But this is happening as soon as the page enters in editing mode, and the styles can be added back and saved. So I don't think this is because the position (and related) styles are now disavowed, I believe this is a bug.
I'm not sure if this is a general Canvas bug or something specific to my institution instance, so I'm wondering if anyone else has had the same issue?
Usually I'd test this out first in the canvas.instructure instance to make sure it's something general to the platform or something specific to check with our local IT staff, but that's not possible right now given recent events…
