Changing Size of Video on Page

[kas200]

I need some help getting a video to look good on a Page. Is there a way to have the video play maximized (or 100% width) by default instead of having the small minimized preview (shown on left in screenshot)? When I add the video as a file to Modules, I get the nice, full-size view (shown on right in screenshot). Can I replicate this on a Page? 

What I've tried:

• Using the "Insert/Edit Media" button in the RCE with the video's File link as the source. This works, as it lets me set the size, but removes the nice player with caption options & playback speed... which is needed for accessibility.
• Attempting to iframe the video onto the Page. I can't figure out what the direct URL is for the video where it's stored in Canvas's Files area, so I can't get it to work.
• Using the "Record/Upload Media" button to upload the video file, which places it on the page as a small minimized preview.

Has anyone managed to make this work? My alternatives are to take the videos out of Canvas's Files area and host them externally, then iframe them in. But with the extra amount of work involved in that, I was hoping to have the flexibility in Canvas to do so.

[bbennett2 · Accepted solution]

I spent some time playing with this problem because it seems like something you could customize in the HTML editor. The short answer is no, you cannot customize the Canvas media player to open by default. Details below.

Getting the media URL

Canvas uses their own API to serve videos. The link in Files is a download link that also uses the API to get the raw file for the user, so it can't be used as a video source. If you play the video, then right click and inspect the file, you'll see a div with the class "mjs-mediaelement". Inside that div, there is an HTML5 <video> element and the raw sources for several display sizes of the file. The structure is below:

<div class="mejs-mediaelement">
  <video width="1098" height="604" preload="metadata" src="https://nv.instructuremedia.com/fetch/a-very-long-video-ID.mp4" style="width: 100%; height: 100%;">

    <source type="video/mp4" src="https://nv.instructuremedia.com/fetch/a-very-long-video-ID-thats-the-same-as-above.mp4" title="1308x720 304 kbps">

    <source type="video/mp4" src="....mp4" title="872x480 199 kbps">
    <source type="video/mp4" src="....mp4" title="654x360 172 kbps">
  </video>
</div>

If you copy one of the source attributes into the browser, you'll see your raw file served from an Amazon AWS server. This source file can be used in an empty <video> container you write into the HTML editor of the page:

<video width="100%" height="auto" controls>

  <source type="video/mp4" src="https://.......mp4">

</video>

That allows you to set the height and width of the file, but you lose accessibility options, which is probably a dealbreaker in most cases.

Grabbing the whole video player as HTML

My next attempt was to inspect the Canvas video player and extract the HTML they use to build it. The thought was that you could save a template file and replace the source files using the method above. Since it's just a player wrapped around a <video> element, you would be able to define the height and width.

The problem with this method is that Canvas strips certain HTML tags when you write custom pages. The player relies on <button> elements for controls (play/pause in particular) that are stripped out when the page is saved. So, the container looks nice and big, but you can't actually play the video.

Conclusion

It looks like you're original hunch, using iFrames, will be the easiest. That way, you get total control over the display without losing the accessibility items. I'd love to see Canvas work some of these customization features into the platform.

[mlove2]

We discovered an interesting situation recently. We've been using the Amara platform and obtaining embed codes for inclusion in Canvas using the Embed Media procedure. Originally we added size restrictions for the appearance on the page and allowed fullscreen. Everything worked fine until recently when we discovered Canvas was (newly) stripping out the height and width attributes.

Is there a new procedure for restricting the size of the video appearance on the page?

[mstimers]

Question, why no go a much easier route and just use YouTube's code? Go to the actual YouTube URL, when the video is up, right click and a menu pops up; one of the options is "Copy embed code", select it and it's on the clipboard. On your Canvas page, get into the HTML editor, and paste the code in place. Works perfectly. Although, you may want to alter the height and width, as it's pretty large by default. I reduced by 20%, so H=682 and W=384, just right!

[mstimers]

Sorry...obviously this only works with YouTube videos, but you can easily create a channel, upload everything to your channel, and voila. Which is also nice since if you teach in Canvas at more than one school (which I do), then the video content is global rather than local.

[AlanCoe]

But then you have youtube advertisements in your video. Why pay a lot of money to Canvas and not have them host videos in the same way that youtube hosts tons of megabytes to free accounts?

[joana_kompa]

Not sure this helps much, but instead of YouTube, you can upload your videos to Google Drive into a folder (which needs to be made sharable for the web. Open video from Drive-Folder in a new window to get the embed-code). From there you can create an iframe. Since it is a folder in your private Google Account, it might be (arguably) easier to manage than a channel on YOUTUBE. You can also compile your videos in folders etc. I agree with everybody else here... it would be nice if Canvas could come up with a solution that does not require a workaround.

Kind Regards!