Responsive vs. fixed 3D embeds

If you plan to embed your 3D model into a webpage or application, you have the option to publish in one of two Viewer Size settings: responsive or fixed.

What is the "Viewer" in "Viewer Size"?
When you publish a 3D model from the BioDigital Human, you are actually exporting it inside what we call the "Human Viewer." The Human Viewer can be published as either a standalone link, which can be opened in any browser, or an embed code / iframe, which can embedded inside any webpage. Learn more in Which format should I choose when I publish my 3D model? This article uses the terms "Viewer" and "3D embed" interchangeably.

Responsive

If you publish your 3D embed as responsive, the width of the embed code is set to 100%, meaning the Viewer will fill the entire width of the container in which it is embedded at all times. This prevents your Viewer from going off-screen and ensures your end users are able to view and interact with your 3D model in its entirety regardless of the device they are using.

Fixed

If you publish your 3D embed as fixed, on the other hand, you are establishing a single width and height for your Viewer across all devices, such as 700 pixels by 550 pixels. Depending on how and where your embedded models will be accessed, this may result in important tools or parts of the 3D model going off-screen, as you can see below in the smartphone preview. In this example, the Viewer is actually wider than the screen.

What is an aspect ratio and what does it have to do with my 3D model?

The aspect ratio of an image or a shape is the proportional relationship, or ratio, between its width and height. Aspect ratio is usually expressed as two numbers separated by a colon. Some familiar examples include 4:3, the classic aspect ratio used for standard definition (SD) television and computer monitors; 16:9, the typical aspect ratio used for YouTube videos and high definition (HD) television; and 1:1 (a square), typically used on social media platforms such as Instagram.

As you learned above, when you publish your 3D embed as responsive, the Viewer automatically adjusts itself to fill the current width of the container in which it is loaded.

This could have led to varying aspect ratios from device to device, but our Publish tool requires you to specify a single aspect ratio for your Viewer. This ensures that the layout of the Viewer is consistent and predictable across different types of devices and screen sizes.

When you select Responsive under Viewer Size, there are three preset aspect ratios that you can choose from: Standard (4:3), Widescreen (16:9), and Square (1:1). You also have the option to create a Custom aspect ratio that best suits your integration.

Click on each one and use the preview modes on the right to see how your 3D model will look on each type of device. 

Once you have selected your preferred option, click Copy Embed Code and paste your copied embed code into your website, LMS, or preferred digital solution.

If you embed your 3D model and are unhappy with the aspect ratio you previously selected, you can always return to the Publish window, select a different aspect ratio, and copy a new embed code.

FAQs

Why is my 3D embed not respecting my Viewer Size settings?

If your 3D embed is not loading responsively or is not respecting the aspect ratio you selected when you published it (a telltale sign is an unusually small Viewer height), your website may be to blame.

Some websites, including many learning management systems, automatically remove some or all of the style attribute from embedded iframes for security reasons. This style attribute is what BioDigital uses to tell the webpage 1) to embed your model responsively and 2) what aspect ratio to use.

If you suspect this may be happening to you, see our troubleshooting article for help: My embedded 3D model is not respecting my Viewer Size settings. 

What should I do if the top of my 3D embed is getting cut off on mobile devices? 

If the top portion of the Viewer is getting cut off on mobile devices or smaller screens, you have two options:

1. Add a minimum height (e.g., min-height: 300px) to the style attribute of your iframe to prevent the Viewer from falling below a specified height. Learn more in The top of my embedded 3D model is getting cut off on mobile.

2. 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. For instructions, see below. 

Can I use the same 3D embed height across different devices?

If you prefer your Viewer to adhere to a single height across all devices instead of a single aspect ratio, you can replace the aspect ratio in your iframe with a specified height.

For instance, take this published embed code, which uses a 4:3 aspect ratio:

<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=Iaex3&lang=es&paid=o_38833e62"></iframe>

After style=, simply replace aspect-ratio: 4 / 3 with height: 600px (or your preferred height in number of pixels) as seen below.

<iframe id="embedded-human" frameBorder="0" style="height: 600px; 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=Iaex3&lang=es&paid=o_38833e62"></iframe>

In addition to spanning the width of its container at all times, your Viewer height will now equal 600 pixels on all devices. 

Advanced: How to set different aspect ratios with CSS media queries

By default, our Publish tool emits a single aspect ratio for your embed code. However, it is possible to implement multiple aspect ratios using CSS media queries.

Note: Media queries require access to the website CSS file, or the ability to inline additional CSS in the embed. If you are working in a learning management system (LMS) or content management system (CMS), this may not be possible due to security settings. Ask your developers for assistance if necessary.

A CSS media query is an effective approach for implementing different aspect ratios at different browser widths. It enables you to detect the size and orientation of the screen and implement the appropriate size accordingly. For example:

• Default, render at 21:9
• Tablet or smaller, maximum width of 768px, render at 1:1
• Landscape, render at 4:3

Note that an aspect ratio or fixed width will already be attached to the iframe HTML element when you publish your embed code. If this is the case, you may need to remove it to implement this approach.

Below is a sample media query for iPad in Portrait mode.

iframe {
	aspect-ratio: 21 / 9;
}

@media (max-width: 768px) {
	iframe {
		aspect-ratio: 1 / 1;
	}
}

@media (orientation: landscape) {
	iframe {
		aspect-ratio: 4 / 3;
	}
}

*Publishing and embedding models requires a School or Business plan. Learn more in What subscriptions do you offer?