Welcome to the Panopto Community

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.

Is there a way to embed a Panopto video in Moodle so that it is responsive?

I have a big ask.

Putting a bunch of videos into a Moodle page using cards.

As in Bootstrap cards.

In each card I'd like to have a responsive display of a Panopto video.

Or is there a better way to do this?


Post #3 here.


  • Options

    Eight views and no response. I'm going to assume the answer is either No, or "Go and do some more coding"

    I've asked a friend who does scripting and CSS as well as HTML, and I will see what I can do.

    I have a growing number of Professional Development videos, and I've decided I really need something with comments and likes. feature creep in a big way. Will look today to see if there is an open source solution.

    The problem with the videos is that they are of all sorts of diverse styles, topics and lengths. So, How to find what you want. Maybe tagging.

    With regards


  • Options
    KathrynKathryn Administrator

    Hi Derek,

    I'm not familiar with Bootstrap cards, there are a few ways to add Panopto videos to your Moodle content. Maybe one can be used in conjunction with the cards.

    The first is to us the Panopto button which may have been add to the text editor in Moodle. You would be able to embed a video anywhere you see the text editor. The embedded version of the video will be the one that appears, but students can still access video search and other interactive features through this player.

    The other option that you have is go get the embed code from the sharing settings for the video. The embed code creates an iframe for the embedded viewer on any page where you can edit the html. Also, in the instructions in the article below, you can learn how to modify the embedded video code, so that the full, interactive player is embedded into a page. (One note on this though, the Moodle embed button creates an embedded video that automatically logs students into Panopto when they click on it, so if you grab the code directly instead, students may be prompted to log in before they can watch a video unless you change the video to be accessible to "anyone with the link")

    One final option to consider - if you want to students to see a group of videos and be able to search through several at once, you could embed an entire folder.

  • Options

    Thank you Kathryn.

    I will check these out. I think I have tried some of these, but the result is not a responsive video, shrinking as the container or the screen gets smaller. I shall see!!



  • Options

    OK, this does not do it. @Kathryn

    At present I am going to give up. This page:

    Describes how to set pixel width. It does not allow that pixel width to shrink when needed.

    Maybe it needs some Javascript.


  • Options

    I agree. Responsive design would be helpful.

  • Options
    KathrynKathryn Administrator

    Hi, I'm sorry you weren't able to get to something that works for your needs.

    I saw that you posted the question in another category, and it looks like another user provided a fairly thorough answer: https://community.panopto.com/discussion/454/can-you-embed-a-panopto-video-in-a-web-page-so-that-it-is-responsive#latest

    Just posting a link, so anyone that has a similar question will see the other post.

    Since it looks like Panopto isn't easily able to do what you would like it to for your use, I would suggest submitting a feature request here that outlines the responsive embed feature that you would like to see:

    Other forum users will be able to see and upvote the request, and we use these responses to help drive what gets added on our road map.

  • Options
    edited November 2020

    Workaround that @Peter Gervaise-Jones showed me:

    Go here: https://embedresponsively.com/

    Click Generic iFrame and paste the Panopto embed code into the field.

    Then click Embed.

    You will see a preview of the video.

    Scroll down to copy the responsive embed code.

    Thanks, Pete!

Sign In or Register to comment.