Working with responsive 3D embeds

School and Business plans only^*

In this article:

• Responsive vs. fixed 3D embeds
• What is an aspect ratio and what does it have to do with my 3D model?
• FAQs
  • Why is my 3D embed not adhering to my Viewer Size settings?
  • What should I do if the top of my 3D embed is getting cut off on mobile devices? 
  • Can I use the same 3D embed height across different devices?
• Advanced: How to set multiple aspect ratios with CSS media queries

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.

If you publish your 3D embed as fixed, 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.

If you publish your 3D embed as responsive, on the other hand, 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.

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 adhering to 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.

Example of an LMS embed that has stripped iframe of aspect ratio code:

To verify whether your website or LMS has removed code from the style attribute, compare your embed code before and after you embed it. After you have pasted your embed code into your website manager and saved your changes, look for the "HTML Editor" or "Edit Code" option again and look at the raw HTML code. You should see a style attribute containing the code width: 100% and aspect-ratio: X/Y. If the attribute is missing either piece of code, it is likely that your website has stripped them out.

Before:

After style attribute has been shortened by LMS:

When this happens, you should go back and publish your model again, this time using the Fixed Viewer Size option.

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. 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>
   

2. Set different aspect ratios for different browser widths using CSS media queries (CSS access required, and coding experience recommended).

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.

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-ration: 4 / 3;
	}
}

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