cancel
Showing results for 
Search instead for 
Did you mean: 
bradhorn
Community Member

iframes changing size unexpectedly

Jump to solution

When I embed videos from news websites or vimeo (whether via the HTML editor or the alt-F9 method of embedding content via the Rich Content Editor) they change size and get *much* smaller if I edit, then save, the page a few more times. I can go into the HTML code and change them back to a larger size, but the phenomenon occurs again after a few more edit/saves.

Here's the code I initially embedded:

<iframe src="https://player.vimeo.com/video/59248851?color=bbc4c9" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

And here's the code after Canvas shrinks it a few edit/saves later:

<p><iframe src="https://player.vimeo.com/video/59248851?color=bbc4c9" width="300" height="150" allowfullscreen="allowfullscreen" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen"></iframe></p>

I am hoping to find a solution that makes embed sizes (or my changes) permanent.

Thanks for reading.

1 Solution

Accepted Solutions
bradhorn
Community Member

Ok, people, here is what Canvas support here at my institution (UW-Madison) has come up with. So far, so good.

Using the Alt+f9 method and then Insert > Media > General, and manually filling in the width and height will insert the dimensions in the CSS of  the iframe outside the style="" tag which is what we want. If you notice any video is not the correct size, look at the HTML editor and see what the dimensions are for the iframe. 

 

If a video has a scroll bar, increase width and height slightly until the scrollbar disappears.

 @englu061   @langlangcat  — wanted to make sure you guys saw this, as well. Panda, the help guy here discouraged me from using your method, fyi, because he said different browsers would interpret the code in different ways and it was impossible to control the size the video would load at.

View solution in original post

8 Replies
tdelillo
Community Member

bradhorn‌ - Have you put in a support ticket for this? It sounds like buggy behavior. Also, I'd try it in different browsers, and make sure you're using an up-to-date browser. I know weird things happen with my edits in general when I'm on computers with old browsers.

Sorry, I'm unable to do this because I've thrown my computer to the lake and moved to the woods taking only my underwear, sandals, wife and children. 

Sigh.

Ok, I'll open a ticket. Thank you for the idea....hadn't thought of that believe it or not. I'm using the most updated version of Chrome so it's not an update issue. Hopefully they'll have some ideas for me. Thanks again.

englu061
Community Member

This same behavior is happening for me as well. I have a current browser so would rule out that as a possible suspect. 

bradhorn‌ did you hear anything from your support ticket? This seemed to happen around the same time as the recent production release...I also noticed that the code I had been using for accordions also stopped working. Not sure how to troubleshoot much past that though.

Thanks for checking on me...I need it. No, my support request has not been addressed. I put in two help requests (one with the original problem, one asking when I would hear back to my request) and haven't heard back from either. Is there any other way to get help that you know of? I am new around here so am out of ideas. I'm strangely glad to hear you're having the problem—the ol' "glad I wasn't crazy" thing. Do let me know if you figure anything out, ok? And I'll do the same.

 @englu061  were you able to get any solutions to this changing iframe issue? I am working with someone from my school's Canvas support team and hopefully I'll get some answers soon. If I do, I'll share them here. Just thought I'd ask to see if you've already been down this road and arrived at the destination...

Brad,

I used the advice from this community to add in an inline style CSS style="width: nnn px; height: nnn px" to the <iframe> tag, so far so good, the unexpected shrinking to 300/150 never occurred anymore. But the problem is that you better keep the HTML width=nnn and height= nnn in there as well, otherwise, the system default will add the width=300 and height=150 in, it won't impact the display mode, but when you are in edit mode, you will see a smaller frame. 

I know this sounds very cumbersome and not "clean" in coding, but it does keep the size of the frames. 

Hey thanks a lot  @langlangcat . I have someone in my school's IT dept helping me with this and I'll pass along your note. Cumbersome or not, anything that works is a good thing. Thanks again.

bradhorn
Community Member

Ok, people, here is what Canvas support here at my institution (UW-Madison) has come up with. So far, so good.

Using the Alt+f9 method and then Insert > Media > General, and manually filling in the width and height will insert the dimensions in the CSS of  the iframe outside the style="" tag which is what we want. If you notice any video is not the correct size, look at the HTML editor and see what the dimensions are for the iframe. 

 

If a video has a scroll bar, increase width and height slightly until the scrollbar disappears.

 @englu061   @langlangcat  — wanted to make sure you guys saw this, as well. Panda, the help guy here discouraged me from using your method, fyi, because he said different browsers would interpret the code in different ways and it was impossible to control the size the video would load at.

View solution in original post