index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" name="apple-mobile-web-app-capable" content="yes" />
    <link rel="shortcut icon" href="assets/favicon.ico" />
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script>
    <script src="scripts/toggle-play-on-window-click.js"></script>
    <title>Yutong Liu</title>
  </head>
  <body style="margin: 0px; overflow: hidden">
    <a-scene
      vr-mode-ui="enabled: false;"
      renderer="logarithmicDepthBuffer: true;"
      embedded
      arjs="sourceType: webcam; debugUIEnabled: false; trackingMethod: best;"
    >
      <a-assets>
        <video
          id="vid"
          src="assets/PosterIntro.mp4"
          preload="auto"
          loop
          autoplay
          webkit-playsinline
          crossorigin="anonymous"
          playsinline
        ></video>
      </a-assets>
      <a-marker
        type="pattern"
        url="assets/xREAL-Marker.patt"
        smooth="true"
        smoothThreshold="2"
        smoothTolerance="0.01"
        smoothCount="5"
      >
        <a-entity
          gltf-model="url(assets/full_screen/screen.gltf)"
          scale="0.1 0.1 0.1"
          rotation="90 180 0"
        >
          <a-video
            id="vid"
            loop="true"
            toggle-play-on-window-click
            src="#vid"
            width="28.5"
            height="19"
            scale="-1 1 1"
            position="0 0 -1"
          ></a-video>
        </a-entity>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>