Please note: All new registrants to the Panopto Community Forum must be approved by a forum moderator or admin. As such, if you navigate to a feature that is members-only, you may receive an error page if your registration has not yet been approved. We apologize for any inconvenience and are approving new members as quickly as possible.
Responsive Embed
Caitlin McCabe
Administrator
Request to make Panpoto's Embed video player fully responsive.
The player does not currently resize to fill the screen correctly on smaller or vertical screens: it has a set embedded size and does not adapt to the users screen real estate correctly.
A responsive web player should include:
- It shrinks and adapts various elements to smaller sizes
- The embed player adjusts layout between portrait / landscape orientations (both in video or in an overlay)
- It adopts a touch-friendly control surface on mobile
- It can be sized down to 100 pixels tall for audio only
- The caption display adapts text sizes based on available space
- It remains in “horizontal” mode in mobile or resized browsers and does not switch to mobile app vertical view (which shows other elements under the video)
- It should also allow for audio only playback to work on mobile
Tagged:
26
Comments
Is there a timeline for implementing this feature? Or documentation of the timeline or prioritization for items on the roadmap?
Yes, please loop me in on when this will be available. (It's a common feature available in a multitude of video hosting tools . . . and is especially important with the rise of viewing on various mobile devices.)
Hey Panopto team, any news on this? Sounds like we were on the roadmap over a year ago. How close are we to arriving at the responsive embed code destination? Thanks!
Upvote for the responsive embed code
@Dave Hannan
Hey Dave, this one was on the roadmap in 2019. It appears to . . . still be on the roadmap. Can you give us a possible timeline?
Thanks!
dann
@Dann Hurlbert I shifted this feature request into "under consideration" status. It doesn't currently have an assigned timeline for completion, but this still is something we'd like to add to Panopto in the future. If this does have a committed date in the future, I'll switch it back to being on the roadmap.
Thanks Kathryn! Hoping it's sooner rather than later. Users need responsive embed codes if players will be used to embed videos on webpages. This broaden's Panopto's use to become a video repository and webhosting tool. Appreciated!
Hi Kathryn, any update on the timeline for the completion of the responsive embed code? Will be a very useful feature.
Currently, I can add a responsive embed code by choosing %. BUT, when a video is embedded using the iframe in a Wordpress site, while the frame size changes, the video size remains the same . . . and the embedded player just letterboxes the sides more (or less) as the viewer adjusts his or her window. So, getting this updated remains a hope/concern for us.
From what you describe, it sounds like the container/div you are placing the Panopto iFrame within in Wordpress is the thing that is not responsive and is limiting the width. From there the iFrame from Panopto is just filling its container.
One potential workaround, if you aren't able to fix the container and want to force it, would be to set the CSS width of the iFrame to be based on viewport width instead of just using the iFrame width (style="width: 50vw; min-width: 300px;" would set the iFrame to take up 50% of the overall window, but not less than 300px). That probably won't completely solve the problem you're having, but it should at least allow you to work around the limitations in WP.
Make it easy for embed links created via Panopto cloud sharing screen to automatically be responsive by adding the following styling as a selectable option.
style="width: 100%; height: auto; aspect-ratio: 16 / 9;"
(Note that this styling is extracted from the Moodle ATTO button code with the plugin settings configured to make embedded recordings responsive)