If the top portion of the Viewer is getting cut off on mobile devices or smaller screens, you have two options:
Option 1: Add a minimum height to your embed code
Adding a minimum height (e.g., min-height: 300px;) to the to the style attribute of your embed code will prevent the Viewer from falling below a specified height.
You can also add a maximum height (e.g., max-height: 600px) to prevent the Viewer from exceeding a specified height.
Note: Adding a minimum or maximum height to your iframe will override the aspect ratio attribute.
For instance, let’s say this is your published embed code:
<iframe id="embedded-human" frameBorder="0" style="aspect-ratio: 4 / 3; width: 100%" allowFullScreen="true" loading="lazy" src="https://human.biodigital.com/viewer/?id=376F&ui-anatomy-descriptions=false&ui-anatomy-labels=true&ui-audio=true&ui-chapter-list=false&ui-fullscreen=true&ui-help=true&ui-info=true&ui-label-list=true&ui-layers=true&ui-loader=circle&ui-media-controls=full&ui-menu=true&ui-nav=true&ui-search=true&ui-tools=true&ui-tutorial=true&ui-undo=true&ui-whiteboard=true&initial.none=true&disable-scroll=false&uaid=Iaex2&lang=es&paid=o_38833e62"></iframe>
If you add min-height: 300px; (or your preferred minimum height in number of pixels) after style= as seen below, your Viewer will always fill the entire width of its container, and it will never fall below 300 pixels, even if this means it will no longer maintain a 4:3 aspect ratio.
<iframe id="embedded-human" frameBorder="0" style="aspect-ratio: 4 / 3; width: 100%; min-height: 300px" allowFullScreen="true" loading="lazy" src="https://human.biodigital.com/viewer/?id=376F&ui-anatomy-descriptions=false&ui-anatomy-labels=true&ui-audio=true&ui-chapter-list=false&ui-fullscreen=true&ui-help=true&ui-info=true&ui-label-list=true&ui-layers=true&ui-loader=circle&ui-media-controls=full&ui-menu=true&ui-nav=true&ui-search=true&ui-tools=true&ui-tutorial=true&ui-undo=true&ui-whiteboard=true&initial.none=true&disable-scroll=false&uaid=Iaex2&lang=es&paid=o_38833e62"></iframe>
Option 2: Use CSS media queries
If you would prefer to have more control over your 3D embed size, you can alternatively set different aspect ratios for different browser widths using CSS media queries. This option requires access to your website's CSS, and coding experience is strongly recommended.
If you are interested in pursuing this option, instructions can be in Working with responsive 3D embeds.