Video as screen

The screen prop accepts a video element.

The screen prop is unreactive, so when using it as a video it's important to only render the Mockup element when the video is loaded. Check out the code example to see how to do this.

WARNING

The video will not be visible on the model if it is set to display: none or visibility: hidden. Use opacity: 0; pointer-events: none; on the <video> element for best browser compatability.

WARNING

The video may not be autoplaying if the original <video> element is scrolled off screen. Some browsers check for viewport intersection so it may be best to set the video position to fixed.

Code example

<template>
  <Mockup 
    v-if="vidReady"
    :screen="videoElement"
  />

  <video
    :src="screenVideo"
    ref="videoElement"
    @canplay="vidReady = true"
    muted
    autoplay
    loop
    style="
      position: fixed;
      top: 0;
      left: 0;
      opacity: 0;
      pointer-events: none;
    "
  ></video>
</template>

<script setup>
import { ref } from 'vue';
import Mockup from 'vue-three-d-mockup';
import screenVideo from './assets/screen.mp4';

const videoElement = ref(null);
const vidReady = ref(false);
</script>

Video as screen #

Code example #

Video as screen

Code example