My embedded 3D model is not respecting my Viewer Size settings

If your embedded 3D model 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:

sample_LMS_embed_with_aspect_ratio_missing_mar23.png

To verify whether your website or LMS has removed code from the style attribute, compare your embed code before and after you embed it by taking the steps below:

  1. Paste your BioDigital Human embed code into your website manager.
  2. Before saving your changes, look closely at the embed code. You should see a style attribute containing width: 100% and aspect-ratio: X/Y.
  3. Now save your changes in your website manager.
  4. Reopen the "HTML Editor" or "Edit Code" option so you can look at the raw HTML code.
  5. Find your BioDigital Human embed code and verify whether the code still contains a style attribute containing width: 100% and aspect-ratio: X/Y.

If the style attribute is missing either piece of code, your website likely stripped them out when you saved your changes.

Before:

LMS_embed_before_mar23.png

After:

LMS_embed_after_mar23.png

If you are unable to use our full style attribute, you will need to generate a new embed code with "fixed" dimensions instead of our "responsive" option. To do this, return to the BioDigital Human web app and take the following steps:

  1. Open My Library and find the model you are embedding.
  2. Hover over the model's tile and click the    three dots.
  3. Select   Publish from the drop-down menu.
  4. Select Viewer Size at the top of the list.
  5. Select Fixed.

  6. (Optional) Adjust the width and height (in pixels). The default width and height are 700 pixels and 550 pixels, respectively.

  7. Click Copy Embed Code.
  8. Paste your new embed code into your website's HTML code.