Unwanted White-space with Embedded Videos

jeff_quinlan

Hello everyone, and Happy New Year! I've run into an issue with unwanted space between an embedded video and text immediately below. There are no obvious errors in the HTML. Furthermore, the issue seems to only appear on the mobile versions of the Canvas Student app or moblie Web Browser version. It's fine on my desktop (see screenshots below). Does anyone have any insight on what causes this issues and is there any way to remove the white space? Thanks!

Whitespace in App.JPG

michael5

You could take this to the Developers Group for a solution. It's a very common issue caused by the size of the iframe that holds the video not being scaled properly or dynamically to respond to specific screen sizes.

Basically, an iframe is a window that holds another webpage for display on a the current webpage. A box within a box, if you will. It appears you have a video within an iframe. In the image you attached, Canvas has scaled the width of the iframe with the video down but it has done nothing about the height of the window - meaning you get a bunch of white space as the video retains its original proportions in response to Canvas' reduction of the iframe width.

To see a visual example, take your browser window (in the image where it displays correctly) and resize your browser window until it is as tiny as a phone screen. You'll see exactly what it is that happens.

The first and easiest fix is to upload the video to Canvas and put it on the page. This way, Canvas can handle the scaling of the video correctly for you - the issue is that Canvas has no way of knowing what's inside the iframe so it can't respond correctly.

The second fix is to invest in a professional video server such as Vimeo or YouTube. Both of these servers have embed-functionality that can scale your videos perfectly when embedded into other pages. We use Vimeo here and it works like a charm and has really improved the look of our pages on Canvas simply because it handles white space for us. I'm not sure where your videos are hosted, I haven't seen that particular video interface before but you may also want to search for a solution with your video host. 

The third fix requires talking to your IT department or having someone help you code a JavaScript solution that can handle the scaling. This isn't impossible, but working with scaling iframes from within the target page (Canvas) is notoriously difficult as there are a lot of security concerns involved with it and a lot of no-gos. 

Hope it helps. 🙂