Vue - Adding background animation

user_1492337 0
Viewed 445

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

vuejs2 vue.js html javascript
2 Answers

Sometimes .. in the path does not work. Try giving the complete path like

<video-bg :sources="['<project-name>/assets/witchcraft-magic.mp4']"
                img="<project-name>/assets/vast.png">
      </video-bg>
user_58778790

Try :

:sources="[require('@/assets/witchcraft-magic.mp4')]"

:img="require('@/assets/img/vast.png')"
user_119891890
Related