A-Frame - Setting Height and Width

Question

I'm trying to set height and width for my aframe element but it fills the window despite any styling I apply. I'm trying to have my aframe 360 image set to 300px high and 300px wide: CODEPEN DEMO

body {
  background: #fff;
}

.container {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #f66;
  height: 300px;
  width: 300px;
  overflow: hidden;
}

a-scene {
  opacity: .5;
  height: 300px;
  width: 300px;
}

Answer 1

This is because, by default, a-scene with unmodified source JS will add class="fullscreen" to it.

You can either overwrite it, or simply add the embedded parameter to your <a-scene> tag like so:

<a-scene antialias="true" embedded>
    <a-sky src="https://ucarecdn.com/e1c757bc-73ee-4efe-b068-4f778ce212a3/" rotation="0 -20 0"></a-sky>
</a-scene>

And of course here's a Forked Example