Fixed Size

The simplest way to embed a model is using a fixed sized iframe:

<iframe src="https://workingspec.com/embed/xxx" width="800" height="450" allowfullscreen></iframe>

Simply copy the code above, change the xxx at the end of the src attribute to match the abbreviation of the model you wish to embed, and if desired edit the width and height attributes to match your required size.

For example, to embed the model with abbreviation ws-hwb-rfw you would use the following:

<iframe src="https://workingspec.com/embed/ws-hwb-rfw" width="800" height="450" allowfullscreen></iframe>

Responsive

You can embed the model in a responsive site using the following pattern:

CSS

.ws-embed {
  position: relative;      
  width: 100%;      
  height: 0;

  /*      
    16:9 ratio

    eg 9÷16 = 0.5625 = 56.25%      
  */      
  padding-bottom: 56.25%;      
}

.ws-embed iframe {      
  border: 0;      
  position: absolute;      
  width: 100%;      
  height: 100%;      
  left: 0;      
  top: 0;      
}

HTML

<div class="ws-embed">
  <iframe src="https://workingspec.com/embed/xxx" allowfullscreen></iframe>        
</div>

Copy the CSS and HTML above and paste into your existing stylesheet and HTML files. If you wish to use an aspect ratio other than 16:9, see the comments in the CSS above for details on calculating the ratio.

Replace the xxx at the end of the src attribute to match the detail abbreviation of the model you wish to embed.

The div with the class ws-embed will fit 100% of the available space - for further control over the width, place this div in a parent element and set a width on the parent.