Rendered iFrames span the entire page witdth, surpassing the body text boundary and clashing with Table of Contents

[BexTuychiev]

Describe the bug

I was trying to render this iFrame code in a markdown cell of my jupyter notebook:

<iframe width="1008" height="726" title="Code snippet - datatable_read" src="https://snappify.io/embed/073ba1bf-973f-45ce-bd69-b5a83bad1936" allow="clipboard-write" style="border-radius:10px;background:linear-gradient(to left, #141e30, #243b55)" frameborder="0"></iframe>

It is supposed to look like this:

However, it is being displayed by Jupyter Book like this: As you can see, the zoom level is much higher and the area of the frame exceeds to the TOC area, clashing with it.

I tried changing the height/width directly from the iFrame and it does shrink the viewport but doesn't shrink the content inside.

Instead, it creates another set of scrollbars inside the iFrame. Is there any way to clip the display viewport of iFrames like this?

Reproduce the bug

Just check out the iFrame code and the screenshots.

List your environment

No response

[firasm]

This is not a clean solution, but two suggestions:

• Set your widths and heights in % rather than raw pixel values so that it spans the area you want it to
• Use this trick from StackOverflow to scale your website content down.

The iframe has a bunch of other properties as well (see here) that should work. You could try the object-fit options as well.

If you need to add some CSS, you can do that in Jupyterbook following the instructions here.