Disable iFrame clear out?

Need help Responsiveness
1

Hi all,

I’m using an HTML embed of a video chat that uses iframes, and due to how bubble is set up, anytime the window size changes, the embed disappears. I contacted the video chat service provider and they said that is because bubble has an “on window.resize()” function that clears out iframe elements. Is there a way to disable this in bubble?

Thanks,
Henry

2

I’m not sure, try with meta tags header.

<meta name="viewport" content="width=device-width,user-scalable=no">

or

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
3

hm didnt seem to work. thanks for the suggestion though

4

Hi all, bumping this – anyone know how to disable bubble from clearing out all iframe elements on window resize? would really appreciate the help!

5

I’ve got the exact same question. Does anyone else know a workaround for this?
Or @hschreib - did you manage to find a solution?

6

I managed to fix my issue so posting just in case anyone comes across the same issue (basically my iFrame was disappearing any time the page was re-sized).

I needed to uncheck ‘Display as an iFrame’ and check ‘Stretch to fit content’. Now the iFrame reloads each time the page is resized but does display.

1 Like
7

If you control the page you’re trying to embed this is a great solution I’ve been using https://github.com/davidjbradshaw/iframe-resizer
Basically, you’ll put one JS file in the parent page that contains the iFrame/HTML element, and one JS file in the child page that is being embedded. This JS will then make sure that the height of the iFrame works continuously.
To implement, I would recommend using JSDelivr with tags in this format:

On the child page:
<script src="https://cdn.jsdelivr.net/gh/davidjbradshaw/iframe-resizer@latest/js/iframeResizer.contentWindow.min.js"></script>

On the parent page:
<script src="https://cdn.jsdelivr.net/gh/davidjbradshaw/iframe-resizer@latest/js/iframeResizer.js"></script>

Good luck!