Canvas: How to Fix Whitespace Issue in Embedded MediaSpace Videos within Canvas

This article provides a step-by-step guide to resolving a whitespace issue in embedded MediaSpace videos within Canvas by removing the width and height attributes from the iframe in the HTML editor. Following these steps will ensure the video displays correctly without excess whitespace at the bottom.

Issue:

Some users have noticed a large amount of whitespace at the bottom of embedded MediaSpace videos within Canvas. This guide will walk you through the steps to resolve this issue by doing a simple edit to the HTML of the embedded video.

Solution:

The solution involves removing the width and height style attributes from the embedded video’s iframe element in the Canvas HTML editor. Follow the steps below to fix the issue.

 Access the Canvas Page

1. Log in to Canvas and navigate to the course where the video is embedded.
2. Go to the page, assignment, or module where the video is located.

Enter the HTML Editor

1. Click on the Edit button to modify the content of the page.
   
2. In the Rich Content Editor, click on the HTML Editor button (</>).
   

Locate the Embedded Video Code

1. Scroll through the HTML code to locate the <iframe> element corresponding to the MediaSpace video.
   Tip: Use the Find command (ctrl+F on Windows, command+F on Macs) and search for "iframe" to quickly highlight the iframe code.

Step 4: Remove the Width and Height Attributes

1. In the iframe tag, locate the width and height attributes.
   Tip: The code should read as - style="width: 635px; height: "608px;"  (The specific numbers may vary)
   
2. Delete style="width: 635px; height: "608px;" entirely.

Save the Changes

1. Once the modifications are complete, click Save to apply the changes.
   

Test the Video

1. Exit the HTML editor and return to the regular view of the page.
2. Play the video to ensure that the whitespace issue is resolved.
3. Test the video in both regular and full-screen modes to confirm that the fix works as expected.