[Vuejs]-Vue Video Background does not start

by

0👍

As source, you have a YouTube page, this is not a video.

 <video-background
  src="https://www.youtube.com/watch?v=PpAxlizirDI"
  style="max-height: 80%; height: 100vh"
>

This is your path to your video. You can just use this value for
showing your video in every resolution.

The source of the video has to be in a format the browser can play (mp4 is a good format to use).

For example:

  <video-background
    src="/files/my-video.mp4"
    style="max-height: 80%; height: 100vh">

Update based on your comment:

Because vue gets compiled it does not know what assets/demo.mp4 is,. You should import it first via an loader.

<script>
  import video from 'assets/demo.mp4' // Or '@/assets/demo.mp4' depending on what loader you use.
  
  export default {
    name: "App",
  };
</script>

And now you could use:

  <video-background
    :src=video
    style="max-height: 80%; height: 100vh">

Leave a comment