embedded

NOTE: This version of the documentation tracks unstable development happening on A-Frame’s master branch. If you wish to try it out, grab the unstable build. Otherwise, head to the documentation for the current 1.6.0 version

The embedded component removes fullscreen CSS styles from A-Frame’s <canvas> element, making it easier to embed within the layout of an existing webpage. Embedding removes the default fixed positioning from the canvas and makes the Enter VR button smaller.

Example

Add the embedded component, then style the <a-scene> element with CSS as if it were an empty <div>. Within <a-scene> is the <canvas> element.

a-scene {
  height: 300px;
  width: 600px;
}

<body>
  <div id="myEmbeddedScene">
    <a-scene embedded>
      <!-- ... -->
    </a-scene>
  </div>
</body>

An inline example of an embedded scene:

Integration with the 2D Page

Embedded scenes can be visually integrated and can interact with the rest of the 2D page. Some things we could do:

Use CSS z-index to put an HTML element above or under the scene
Use a transparent <a-sky> or no background to overlay <a-scene> on top of the page, with underlying HTML elements visible
Use interaction with HTML elements (e.g., buttons, forms) to affect the scene

Using I-Frames

Only one <a-scene> can exist on a page. Alternatively, we can use an <iframe> with allowfullscreen="yes" and allowvr="yes" to display multiple scenes. For now, if the I-Frame is not on the same origin as the page, the WebVR polyfill for mobile won’t work and there won’t be any tracked rotation of the device.