Not sure how to add a bg video

[malani-art]

Hi,

I'm attempting to add a video as the background - behind the graph. I can't seem to figure out how to do that.

I have added to index.html:

<video id="background-video" autoplay loop muted crossorigin="anonymous"> 
  <source src="https://static.videezy.com/system/resources/previews/000/012/740/original/Particles_4_-_30s_-_4k_res.mp4" type="video/mp4">
</video>

and

.backgroundColor("rgba(0,0,0,0)")
which by the way, gives me this message: 'THREE.Color: Alpha component of rgba(0,0,0,0) will be ignored.' - not sure why!

Then, in the .css

#background-video { width: 100vw; height: 100vh; object-fit: cover; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; }

Maybe I'm doing it completely incorrectly but I'm not sure how I can do this. Any guidance would be appreciated. Thank you!

[vasturiano]

@malani-art I've just pushed a fix that will correctly interpret the alpha channel in your rgba background color, and allow you to set the background completely transparent, so you can overlay it on a video or any other dom element.

[malani-art]

Thank you! I'm sorry if this is a very 'noob' question, but even now, I still can't seem to make the video background! Does it have something to do with the below? I'm really not sure how to adjust this...:

scene.appendChild(state.sky = document.createElement('a-sky'));
    state.sky.setAttribute('radius', 3000);

[malani-art]

Hi @vasturiano, apologies for bringing this thread back although it is closed! But, I've been having a hard time implementing a video sphere in the scene. I'm not sure where I'm going wrong?:

In the head of index.html:
<script id="video" type="text/template"> <a-scene> <a-assets> <video id="SphereVideo" autoplay="true" loop= "true" muted crossorigin="anonymous" src="https://static.videezy.com/system/resources/previews/000/012/740/original/Particles_4_-_30s_-_4k_res.mp4"> </a-assets> <a-videosphere src ="#SphereVideo"></a-videosphere> </a-scene> </script>

Then, in the 3d-force-graph-vr.js:
I add this line under where the scene is being created:
scene.innerHTML = document.getElementById('video').innerHTML;

As far as I understand, this should work but it isn't. Simply looking for a way to place a 360 video behind the graph. Any help would be extremely appreciated!

[malani-art]

Figured it out thanks.