Sketchfab embeds

With the latest version of Sketchfab they’ve added a two features related to the embeds: they’ve added alternative code options to iframes and the thumbnail which is displayed if the embedded model is disabled can be high-res. Besides that I’d like to talk about the options you have when embedding a model with Sketchfab.

Here’s the code for the iframe with all the default options

<iframe frameborder="0" height="480" width="854" allowFullScreen webkitallowfullscreen="true" mozallowfullscreen="true" src="https://sketchfab.com/models/dGUrytaktlDeNudCEGKk31oTJY/embed?autostart=0&transparent=0&autospin=0&controls=1&watermark=1"></iframe>

The options are

• Frameborder: doesn’t seem to do anything, within wordpress that is
• Height: the height of the iframe
• Width: the width of the iframe
• webkitallowfullscreen: doesn’t seem to do anything, within wordpress that is. You can enable fullscreen with a button in the iframe.
• mozallowfullscreen: doesn’t seem to do anything, within wordpress that is. You can enable fullscreen with a button in the iframe.
• src: the location of the file which is to be embedded

Within the src there are the important options

• autostart (default: 0): determines if the embedded model is loaded whenever the page it is on is loaded. If you set this to 0 (the default) the iframe will show an image of the model. To activate the 3D mode, you need to click the iframe once. The model is loaded after that. If you set it to 1 the model is loaded immediately when the page opens. If you have many models embedded on the same webpage or if you don’t want to burden the visitors of the page with possibly incompatible content (IE users for instance) it’s a good idea to leave this option on 0.
• transparent (default: 0): determines if the background of the iframe is transparent or not. Sketchfab uses a light grid-pattern as a background which looks pretty good. If you want the embedded 3D model to use the same background as the rest of your site, you can set this option to 1. This also works in combination when autostart is set to 0. The image which is shown in that case also will have a transparent background.
• autospin (default: 0): the speed at which the model turns when the user doesn’t touch it. Using the autospin is very nice to differentiate the 3D model from other content. When the model turns, it’s visible that it’s actually a 3D model. You can use positive or negative values such as 1.5 or -0.2.
• controls (default: 1): the iframe has a few controls, such as a like-button, fullscreen-button or help-button. You can disable these by setting this option to 0.

Pro options, only available if the model comes from a pro-account

• watermark (default 1): the iframe has a sketchfab watermark in the bottom-right corner. You can switch this off if you have a pro-account. If you want to do that, set this option to 0.
• stop_button (default: not included): the iframe also has a stop-button. It’s in the top-right corner. If you click this, the 3D model will be disabled and the iframe switches back to an image. This is great if you have many models on a single page embedded and want to look at all of them without overloading your computer. If the model comes from a pro account you can “force” the 3D content on the user by disabling this button. Set it to 0 if you want to do this.
• desc_button (default: not included): the iframe comes with a description, a thumbnail and author information. clicking on thi info-popup will take you directly to the model on sketchfab.com. You can hide this button by setting this option to 0.

Default iframe

<iframe width="600" height="400" frameborder="0" allowfullscreen="" webkitallowfullscreen="true" mozallowfullscreen="true" src="https://sketchfab.com/models/dGUrytaktlDeNudCEGKk31oTJY/embed?autostart=0&amp;transparent=0&amp;autospin=0&amp;controls=1&amp;watermark=1"></iframe>

Autostart switched on, autospin, speed 0.2 and a transparent background. My favourite!

<iframe width="600" height="400" frameborder="0" allowfullscreen="" webkitallowfullscreen="true" mozallowfullscreen="true" src="https://sketchfab.com/models/dGUrytaktlDeNudCEGKk31oTJY/embed?autostart=1&amp;transparent=1&amp;autospin=0.2&amp;controls=1&amp;watermark=1"></iframe>

Autospin, speed 4

<iframe width="600" height="400" frameborder="0" allowfullscreen="" webkitallowfullscreen="true" mozallowfullscreen="true" src="https://sketchfab.com/models/dGUrytaktlDeNudCEGKk31oTJY/embed?autostart=0&amp;transparent=0&amp;autospin=4.0&amp;controls=1&amp;watermark=1"></iframe>

All buttons disabled with a transparent background

<iframe width="600" height="400" frameborder="0" allowfullscreen="" webkitallowfullscreen="true" mozallowfullscreen="true" src="https://sketchfab.com/models/dGUrytaktlDeNudCEGKk31oTJY/embed?autostart=0&amp;transparent=1&amp;autospin=0&amp;ui_controls=0&amp;watermark=0&amp;stop_button=0&amp;desc_button=0"></iframe>

Other embed codes

I’m not showing these as examples here becaus the BBCcode embed doesn’t work on my blog and the HTML embed doesn’t play well either here.

BBCcode (see wikipedia)

[sketchfab]dGUrytaktlDeNudCEGKk31oTJY[/sketchfab]
[url=https://sketchfab.com/models/dGUrytaktlDeNudCEGKk31oTJY]Maison d'artiste[/url] by [url=https://sketchfab.com/klaasnienhuis]Klaas Nienhuis[/url] on [url=https://sketchfab.com]Sketchfab[/url]