AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
Html code to resize iframe3/29/2024 ![]() Embed providers and script writers are not going to change all of their scripts so that it works with Canvas. You might ask why doesn't Canvas provide this functionality automatically? One reason is that it has no control over the scripts that get embedded and there is no universally agreed upon naming scheme so the two scripts can talk, so what works for H5P wouldn't work for something else and the end-user doesn't control the embed to be able to change it to what H5P needs. Installing the companion script requires intervention of the Canvas admin, but then they will have to monitor Canvas releases every three weeks to make sure something doesn't break. This library is the official React interface for iframe-resizer, which enables the automatic resizing of the height and width of both same and cross domain iFrames to fit their contained content. ![]() ![]() H5P explains how to do this on their H5P with Canvas page, but the process is similar for other embeds. There is a way that allow iframes to communicate with the parent window, but it involves adding a companion script to the account/sub-account's global JavaScript file. Allowing scripts to run directly on the page without sandboxing it inside of an iframe is a major security risk. Worse yet, it could do damaging things since the parent window is Canvas and the script would have full access to anything the user could do - include make API calls that delete all their files, send spam to other students, submit quizzes before it's ever taken, etc. I was able to make a responsive iframe size using vw on both width and height of the style element because I know the amount of horizontal width I want the elements to use and then I calculate the height based on the width and the knowledge that the video is 16:9. You need to isolate the contents of the iframe from the page for security purposes and also to keep it from changing the display and/or functionality of the page.If another website used the same CSS classes that Canvas did, then you could potentially get some unreadable text on the Canvas page if the embedded content was allowed to directly interact with the page. Content within an iframe does not get to resize the iframe to fit the window or the content - this is not how iframes work.
0 Comments
Read More
Leave a Reply. |