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.

Can you embed a Panopto video in a web page so that it is responsive?

I really started to seek an answer on this question here:

But this is probably the wrong place. Is there code - or a way you can use to insert a Panopto video in a web page so that it responsive?

-Derek

Best Answer

Answers

  • The embedded player will respond to changes in the page in that it will fit the iFrame and fill it out. If the iFrame container is portrait it will change the display format, in some cases this is good, some not so much. You can set the iFrame width and height to be relative and leave it at that, but I would probably use breakpoints. I find this guide to be super helpful when getting started in designing responsive elements: https://web.dev/responsive-web-design-basics/

    When I need something like this, I generally just deliver a fixed height and let the width respond to the width of the container to make it easy. You could do something like this (https://faq.dailymotion.com/hc/en-us/articles/360022841393-How-to-preserve-the-player-aspect-ratio-on-a-responsive-page) if you need the ratio of the container to be preserved, but you could also just deliver a 1:1 container and call it a day. The Panopto player will keep the video shown the original ratio no matter what the container is.

    For cards, we use them to add in some custom text on the Panopto upload menu. It is my understanding that cards (and what is contained within) are generally a fixed dimension, then you will change how the cards are configured on the page with the size of the container. With that, I guess it will depend on what you are after when you refer to a responsive layout in terms of what you need the Panopto player to do.

    Hopefully that helps, but if you could clarify what you intend, that would help in getting to a solution.

    -Michael

  • You say @Michael Espey : "For cards, we use them to add in some custom text on the Panopto upload menu. It is my understanding that cards (and what is contained within) are generally a fixed dimension,  . . ."

    I am not sure about this. The cards I use, the whole point of them is that they are responsive. See this:

    From https://getbootstrap.com/docs/4.0/components/card/

    When I put a Panopto video in a card, it breaks the card. 🤨

    Ideally,

    1) nine videos on a page, 3X3, links to 'More' to explain what the viudeos are about.

    2) when you click on a video (thumbnail) it takes you to the top of the page, opens up in a big responsive player (say full width, or 500px , whatever is smaller)

    The aim: display a bunch of video's, and when you click on one, it opens up in a player. But I want enough information about each video there as well.

    Hmm. Clear as mud??

    -Derek

Sign In or Register to comment.