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!

[Chris_Hofer]

Hi @jeff_quinlan ...

I don't recognize the video player interface in the screenshot that you provided...though I can see the word "economy" at the bottom right corner.  Might there be some HTML in the embed code for that video that is causing the extra white space in mobile compared to desktop/laptop views?  I logged into my own sandbox course on my Canvas Teacher app on my iPhone, and I viewed two videos I had embedded (one using the media embed option of the RCE and one using Canvas Studio), and there I don't have the extra white space that you show.

It might help for you to provide some of the HTML embed code from the video or your page so we can help troubleshoot this more with you.  Thanks!

[michael5 · Accepted solution]

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. 🙂

[jeff_quinlan]

Thanks @Chris_Hofer and @michael5 .

Michael, I like Vimeo as an option but wondering how you manage security (if you do). The instructor in this case is concerned that their videos not be shared, and even with unlisted videos in Vimeo they seem quite easily shareable. I'd rather not go down the password or private routes, but I guess those are the only options?

Thanks again. 

[michael5]

Hi Jeff, I appear to have missed your response until now but if it's still relevant, here are some tips. Vimeo has a lot of features to prevent sharing in the professional versions. You can disable sharing and downloading and even decide which specific domains the video can be played on, so it's a very safe platform in this regard. The options are behind a pay wall, so they may not appear if you're using the free version of Vimeo.

I even tried one time to retrieve a video through our page source code (on a page that had one of our embedded Vimeo videos) just to see how safe it was and I definitely couldn't hack it - so short of serious hackers, I wouldn't be too concerned. 🙂

The most important thing is that you do not share the link to the video. For example, if you wanted to send an e-mail to a student with a direct link to a video hosted on Vimeo. This link can be used to rip the video - just Google "Vimeo ripper" and you'll see there are tons of pages where you can easily steal Vimeo content, but you do need the direct link to the video.

So long as your video is embedded into another page and this is the only place that anyone views it, you're safe from everything short of screen recorders and talented hackers. A student could record their screen and play the video in its entirety and thereby rip the video. But to my knowledge there's no way to prevent this on any video hosting platform at all.

As of now, Vimeo and YouTube are the video hosts that are most likely to be targeted by hackers and rippers simply because they have such a massive share of the market for video hosting. A smaller provider with similar functionality may theoretically be a safer bet just because they are less interesting to the people who produce software that can compromise the security measures. In my opinion though, Vimeo is safe enough and no matter what you do, there's always a risk once the content is online. Vimeo reduces this risk by a lot and I think it's safe to say that there's a general consensus about it being safer than YouTube.