0
Skip to Content
VERE EXPERIENCES
VERE EXPERIENCES
Collaboration Space
Login Account
VERE EXPERIENCES
VERE EXPERIENCES
Collaboration Space
Login Account
Collaboration Space
Login Account
Do these quick checks if it’s still flat CORS on S3 (needed because the player turns your MP4 into a WebGL texture): json Copy code [ { "AllowedHeaders": ["*"], "AllowedMethods": ["GET","HEAD"], "AllowedOrigins": ["*"], "ExposeHeaders": [] } ]
<video id="tosca-player"
  class="video-js vjs-default-skin vjs-big-play-centered"
  controls
  preload="auto"
  playsinline
  webkit-playsinline
  crossorigin="anonymous"
  data-setup='{
    "fluid": true,
    "plugins": {
      "vr": {
        "projection": "360",
        "motionControls": true
      }
    }
  }'
  style="width:100%; height:auto;">
  <source src="https://connectingrealitiess3360panos.s3.eu-west-2.amazonaws.com/ExploringPossibilities/TOSCA.mp4" type="video/mp4">
</video>
This uses Video.js’s data-setup to auto-init the VR plugin, which avoids Squarespace stripping inline scripts.

Step 3 — Double-check S3 (you’ve done some already)
Content-Type on the object: video/mp4

Bucket CORS (Permissions → CORS):

json
Copy code
[
  { "AllowedHeaders":["*"], "AllowedMethods":["GET","HEAD"], "AllowedOrigins":["*"], "ExposeHeaders":[] }
]
Public read allowed (via Bucket policy, since ACLs are ignored with “bucket owner enforced”).

If it’s still flat
Some templates still block plugin init. In that case, use A-Frame (very reliable) in a Code Block:

html
Copy code
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<style>.vrwrap{position:relative;width:100%;padding-top:56.25%}.vrwrap a-scene{position:absolute;inset:0}</style>
<div class="vrwrap">
  <a-scene embedded>
    <a-assets>
      <video id="tosca360"
             src="https://connectingrealitiess3360panos.s3.eu-west-2.amazonaws.com/ExploringPossibilities/TOSCA.mp4"
             crossorigin="anonymous" playsinline webkit-playsinline preload="auto"></video>
    </a-assets>
    <a-videosphere src="#tosca360" rotation="0 -90 0"></a-videosphere>
    <a-entity light="type: ambient; intensity: 1"></a-entity>
    <a-sky color="#000"></a-sky>
  </a-scene>
</div>
<script>
  document.addEventListener('click', function once(){
    const v=document.getElementById('tosca360'); if(v&&v.paused){v.play().catch(()=>{})}
    document.removeEventListener('click', once);
  },{once:true});
</script>

Site Title

email@example.com