Panopto videos can now be embedded in Moodle in the 16:9 format. The default size of such videos has been increased to 720 x 405 px, which is often too wide for the content area in the three-column course template used at Royal Holloway. This results in an oversized thumbnail and a horizontal scroll bar. Yuk.
Note: content cut off on right handside, viewer tools not all visible and a horizontal scroll bar.
One alternative is to resize the embedded video. This requires some potentially tricky arithmetic in order to retain the 16:9 ratio. Harder still is working out the optimum size for all your learners (hint: there isn’t one, as a fixed size will work better in some devices than others).
There is a quick, non-numerically challenging yet highly effective method by which embedded videos will respond to your learners’ devices and resize appropriately, without distorting the dimensions of the video or requiring horiontal scrolling.
Firstly, embed the video in the normal way, you may find this short video useful if you havent done this before. Then you need to edit the code:
- Click the Edit link for the Label in which the video is embedded
- Expand the editing menu
- Switch to code view
- Scroll down and locate the line of code beginning with
<div><iframeand replace the<div>tag with<div class="responsive-video">(in the example below this appears on Line 6 but it could appear further down the page) - Click the Save and return to course button
Your video will now respond to the device screen sizes used by your learners.
Note: widescreen ratio supported, all viewer tools visible and no scrolling required.
