Changing Size of Video on Page

Jump to solution
kas200
Community Participant

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? 

Image showing embedded minimized video on Canvas page, versus the expanded view on the Files 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.

1 Solution
bbennett2
Community Champion

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.

View solution in original post