I'm trying to add some background mp4/gif animation to my webpage, but for some reason it's not working - it only shows some black placeholder for (what seems to be) the animation.

This is the library I've tried to use: https://github.com/pespantelis/vue-videobg

Having followed the instructions, I've ended up with this (only showing relevant sections):

The main.js file:

// eslint-disable-next-line import/extensions
import VideoBg from 'vue-videobg';

Vue.component('video-bg', VideoBg);

The Comp.Vue component file:

<template>
  <div>
    <v-container fluid class="primary">
      <v-row>
        <v-col>
          <video-bg :sources="['../assets/witchcraft-magic.mp4']"
                    img="../assets/vast.png">
          </video-bg>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

BTW the same outcome happened to me while trying using other libraries - for example https://github.com/avidofood/vue-responsive-video-background-player so I guess there's something basic I'm doing wrong