video-wrapper display: none

[JuanDiego6998]

The video-wrapper div inside the component has an inline display:none style that prevents the video from showing.

[pmochine]

Hey @JuanDiego6998 thanks for the issue.

Could you show me your code of <video-background>?

It's set to display: none; because it's just not ready to be played or autoplay is set to false.

[JuanDiego6998]

Yeah of course.

<template>
 <video-background id="main" src="@/assets/video/timelapse.mp4" style="height: 100%;" 
  poster="@/assets/img/logo.png">
    <b-container fluid id="menu">
      <b-row id="botones" align-h="center" align-v="start">
        <b-col cols="12" sm="6" md="4" lg="2">
          <router-link to="/secundaria">Educación <br/> Ambiental</router-link>
        </b-col>
        <b-col cols="12" sm="6" md="4" lg="2">
          <router-link to="/secundaria">Redes <br> Fantasma</router-link>
        </b-col>
        <b-col cols="12" sm="6" md="4" lg="2">
          <router-link to="/secundaria">Plásticos</router-link>
        </b-col>
        <b-col cols="12" sm="6" md="4" lg="2">
          <router-link to="/secundaria">Reciclaje</router-link>
        </b-col>
        <b-col cols="12" sm="6" md="4" lg="2">
          <router-link to="/secundaria">Pesca</router-link>
        </b-col>
        <b-col cols="12" sm="6" md="4" lg="2">
          <router-link to="/media">Media</router-link>
        </b-col>
        <b-col cols="12" sm="6" md="4" lg="2">Videojuego</b-col>
      </b-row>
      <Foot />
    </b-container>
  </video-background>
</template>

That's the template for the component I am trying to use it in.

[pmochine]

@JuanDiego6998 Thanks for your code. Two things that come to mind:

1. Do you get any console errors?
2. You are using @ for showing the path. Does the path resolve correctly to a full path? (Try using a full path to the video like "/assets/video/timelapse.mp4"

Have a look at my demo page:
https://github.com/avidofood/vue-responsive-video-background-player/blob/master/index.html

Worst case is that you need to try to repeat the issue and upload it to GitHub or somewhere else so I can try it out.

[JuanDiego6998]

First of all, thanks for your help. I don't think it gives any console errors and the path resolves. I'll try using it in another view and let you know. Thanks again!

[JuanDiego6998]

Hey, so I double checked and this is my console when running the page.

It does show an error, but I don't think it is Vue related. Also, just in case it's helpful, this is the Vue devtools inpector of the component.

[pmochine]

@JuanDiego6998 Hey sorry, I was busy and could not reply to you. I have another question. When you remove the display: none of the video-wrapper, what happens? Does it show you the video and does it play it?

And what happens if you use a normal source path like "/assets/video/timelapse.mp4" or something like that

[JuanDiego6998]

No worries. When I remove it the video-wrapper and the video itself fill the page as they should, but the video does not play or appear. Same thing happens with a normal source path. I tried the component by itself in its own vue and the display: none still appears.
For reference, this is the component by itself in a page with a title and the video as content to check the path is working.

<template>
    <video-background src="../assets/video/timelapse.mp4" style="height: 100%;" poster="../assets/img/logo.png">
        <h2>This is vbg</h2>
        <video loop autoplay controls height="600px">
            <source src="../assets/video/timelapse.mp4" type="video/mp4">
        </video>
    </video-background>
</template>

<script>
export default {
    name: "VBG"
}
</script>

<style lang="scss" scoped>

</style>

[pmochine]

@JuanDiego6998 we are getting closer! I think I know what the problem is, not sure yet how to fix it. My guess is that you are using the Vue CLI. The problem is that the path of the video is dynamically changed.

That means your poster poster="../assets/img/logo.png" is also not working, since the real path of your image is something different like: /img/logo.82b9c7a5.png

I'm going to search for a solution.

Edit1:

First solution is to move your img and video to the public folder and use relative paths. Placed in the public directory and referenced via absolute paths. These assets will simply be copied and not go through webpack

[pmochine]

@JuanDiego6998 ok this is it! You can read more about the issue here

But one solution works totally fine is:

<template>
    <video-background :src="require(`@/assets/video/timelapse.mp4`)" style="height: 100%;" :poster="require(`@/assets/img/logo.png`)">
        <h2>This is vbg</h2>
    </video-background>
</template>

<script>
export default {
    name: "VBG"
}
</script>

[JuanDiego6998]

Thanks infinitely, you're awesome! It works like a charm.

[floydqwz]

I just tried src="https://github.com/avidofood/vue-responsive-video-background-player/blob/master/demo/public/videos/roadster-loop-imperial.mp4?raw=true" and got similar problem. Nothing is shown. If I do like you prescribe, download the file and then use :src="require(@/assets/video/roadster-loop-imperial.mp4)" it works, but how can any video online be used?

[pmochine]

@floydqwz Hey sorry, forgot to answer. But I'm super sure that the URL is not able to play videos at all. Change it to: https://avidofood.github.io/vue-responsive-video-background-player/demo/public/videos/roadster-loop-imperial.mp4

And it should work.

I also tested another URL: http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4 and it works fine as well

EDIT:
I have to correct myself. Your link should be working because it works with a simple html video player as well. Not sure what's happening there. Have to check

EDIT2:
Ok. I know what the problem is. Because my code checks the MediaType. But it resolves the link to: video/mp4?raw=true Obviously this is false.

[pmochine]

@floydqwz I have added a patch. Now the links works. Thanks for your comment!