Showing results for 
Search instead for 
Did you mean: 
Community Champion

iframe issues (reverts to 300x150)

UPDATE (Sep 21, 2017): Thanks to  @annmarie_johnso  for the solution:

"I have found a work around! If you use style="width: 600px; height: 400px;"  it doesn't get stripped out! (as opposed to height="480" width="800")"

ORIGINAL POST: We've had several instances note by multiple instructors of iFrames resizing themselves to 300x150, despite being embedded at larger sizes.

Is this local to us, or are others seeing it as well?

19 Replies
Community Member

Yes, I'm noticing this as well.

Community Champion

I have noticed that too!  Glad to see I'm not the only one I thought I was doing something wrong.

Community Champion

 @johnmartin ,

Seems there is another post with this same question and stefaniesanders‌ suggested we review the conversation for a workaround.

According to  @annmarie_johnso ‌ this is what we need to do:


Community Champion

Thank you ysmalls,  @annmarie_johnso , and stefaniesanders! THIS IS WHY I LOVE THE COMMUNITY!!! Smiley Happy

Community Contributor

Using an inline style to override whatever style Canvas is imposing on iframes is a great idea. 

Sadly for us, we have a LOT of embedded Kaltura audio only players in a placement exam Quiz bank. Now we have to go back and edit each one to fix this bug. I'm so grateful for this community for finding a fix, but disappointed that Canvas is causing us extra work with this "feature."

Community Champion

Thank you for the heads-up here. I hope I do not have to go back and redo a lot of pages because of this... I'm kind of scared to go look now. OUCH.

laurakgibbs, my strategy is to just bury my head for a release cycle and hope they fix it before I have to make any changes....

Me too! I love summer (i.e.not teaching in summer), although I've sure put up a lot of demo pages with iframe content... 🙂

Community Contributor

If you are willing to add some additional code, you can actually use CSS to bypass the HTML coding that is rendering the iframe in the specific aspect ratio. I shared a blog post on this, where I talk about Embedding a YouTube Player with Responsive Aspect Ratio‌ that will scale appropriately based on the size of the screen. I just added an iframe into one of my courses yesterday using this, and it retained the size that I had specified.

I hope that this helps.