Make embed code responsive

Tio 4 years, 5 months ago

Hi. Right now the embed for a playlist is something like <iframe src=”https://www.tromsite.com/videos/fvp-3/#fvp_27″ allowfullscreen width=”678″ height=”553″ frameborder=”0″ style=”max-width:100%”></iframe> – is it possible to change this and make it responsive? Something like https://stackoverflow.com/questions/32664971/creating-a-169-aspect-ratio-iframe-based-on-browser-size-percentage? Cheers!

Viewing 3 replies - 1 through 3 (of 3 total)

Juraj Kacaba 4 years ago

Hello Tio,

Thanks for reaching to us!

I’ll forward your inquiry to our development team, we’ll git in touch with you in the close future.

Thanks,
Juraj
Martin 4 years ago
Hello Tio,

as you can see in that Stack Overflow answer, this would have to include some CSS code as well. You need some code like that even for YouTube embed codes to appear as responsive.

In our iframe code we already include that max-width CSS property to make sure it at least adjusts to the content column width if the iframe is wider.

We could include a whole bunch of code around the iframe to make it responsive though. It would look like this:
```
<div style="padding-top: calc( 56.25% + 156px); position: relative;">
  <iframe src="https://foliovision.com/player/demos/amazon-signed-urls/fvp" allowfullscreen style="height: 100%; width: 100%; position: absolute; top: 0; left: 0" frameborder="0"></iframe>
</div>
```
Thanks,
Martin
Tio 4 years ago

Thanks! It would be useful if this would be the default embed code when people click the embed button of FV player. So that they don’t have to add it manually.

Viewing 3 replies - 1 through 3 (of 3 total)