Responsive Video Or Player?

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 :wink: )

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.

Your iframe cannot be responsive as long as you are telling it to be 480 (somethings) wide. Try setting width to 100% and dont set the height

Some css may also help: