resposive iframe won't work on froglearn website

[Chay]

Good afternoon,

I'm trying to embed a banner slide show using the html widget into a froglearn site, and whenever I change both the width and the height to 100% to make it responsive it reverts to a much smaller size. If I make just the width 100% and keep the height to 400px it works somewhat better but the scaling isn't great and creates big gaps. Has anybody come across this before? Apologies if the explanation is a bit rubbish, I'm very new to all this! Below is the code I am using.

<iframe src="//cdn.bannersnack.com/banners/bdtk5hh7e/embed/index.html?userId=27599251&t=1557744930" position="fixed" overflow="hidden" width="100%" height="100%" scrolling="no" frameborder="0" allowtransparency="true" allow="autoplay" allowfullscreen="true" ></iframe>

Kind regards

Chay

[Graham Quince]

On 13/05/2019 at 13:27, Chay said:

Good afternoon,

I'm trying to embed a banner slide show using the html widget into a froglearn site, and whenever I change both the width and the height to 100% to make it responsive it reverts to a much smaller size. If I make just the width 100% and keep the height to 400px it works somewhat better but the scaling isn't great and creates big gaps. Has anybody come across this before? Apologies if the explanation is a bit rubbish, I'm very new to all this! Below is the code I am using.

<iframe src="//cdn.bannersnack.com/banners/bdtk5hh7e/embed/index.html?userId=27599251&t=1557744930" position="fixed" overflow="hidden" width="100%" height="100%" scrolling="no" frameborder="0" allowtransparency="true" allow="autoplay" allowfullscreen="true" ></iframe>

Kind regards

Chay

Hi Chay,

Sorry no one has answered your post.  My best guess is that Frog pages don't really have a height - so setting the height to 100% messes up the embed code.  Unfortunately I think you've already solved the problem by setting the height in pixels.  You could try the Layout Looks widget to set a height for the layout box and then use height 100%.  That might solve it.

https://www.frogeducation.com/community/frogcode/frogcode-showcase/layoutlooks