Cerridwen's Cauldron — VERE EXPERIENCES

0

Skip to Content

Collaboration Space

Login Account

Collaboration Space

Login Account

Collaboration Space

Login Account

Croeso

Take a deep long breath.

  



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>

Croeso

Site Title

email@example.com