Can you embed a Panopto video in a web page so that it is responsive?
Derek Chirnside
Tyro
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
-
Michael Espey
Superstar
If you set the Panopto player dimensions to 100% x 100% it will just fill its container so if you have a container that works as you expect, that will do what I believe you are after. In my experience, this has been reliable. It isn't always the solution, but it seems like it could solve this. If you look at the embed player in your browser (https://corp.hosted.panopto.com/Panopto/Pages/Embed.aspx?id=76581d36-2df2-4772-98fa-ab6000f5fce5#) it should just fill the window.
If that isn't behaving the way you expect, would you be able to expand on what you mean by "breaks the card"? If you just need a thumbnail in each small card, you can grab that from Panopto and just serve that image. Then you would just need to change out the ID in the player up top to change the video it is showing.
If you want to have it respond to breakpoints (500px or full width depending on window size) that will need to be done with CSS on your side controlling the container or you could try using the max-width attribute to see if that is enough for your need. There isn't much that Panopto can add that would help beyond what is already there. I can't seem to put my hands on the code that I previously put together for something like this, but if I can track it down I would be happy to share it. In that case, it was to scale text with the window down to a point and up to a point, but the logic would hold.
5
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