I know much has been asked before regarding adding responsive videos using Beaver Builder/Themer. So, this question is hopefully a little different and helpful to others.
I am trying to embed a video player that is tied back to a service that allows us to stream either real-time or pre-recorded videos. In short, once you add the player to a page, you do not have to do anything else other than point a stream to the player.
The specific issue I’m having is this: After embedding the player, I noticed that when we resize the page, the window holding the player is responsive, but the actual contents, that is, the player itself, is not. Could it be the player’s coding is the actual issue?
Like other players and video embeds, this uses iFrames. After playing a bit with the code, we have gotten it to where it “mostly resizes”, that is it created a scroll bar to the right size, and the only way to get the full play to show is by refreshing the page.
Here is the player code below:
<iframe
src="https://app.xxxxxxx.live/embed?stream_url=https://app.xxxxxxx.live/api/v2/rtmp/auth/stream/cdn/index.m3u8?key=d_auth_104991_si55p1lku"
width=480
height=270
frameborder="0"
allowfullscreen
>
</iframe>
(I removed the >< so the code would show)
( I added it back and used the code button )
So, my question is how can we accomplish having BOTH the player and window resize properly together as the screen resizes? I am confident this must be possible.