# Video as Tab-Background

**URL:** <https://discourse.nodered.org/t/video-as-tab-background/8594>\
**Category:** Dashboard\
**Created:** [4 March 2019 14:07 UTC](https://discourse.nodered.org/t/video-as-tab-background/8594 "2019-03-04T14:07:14Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tobi](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Tobi](https://discourse.nodered.org/u/Tobi)\
**Post date:** [4 March 2019 14:07 UTC](https://discourse.nodered.org/t/video-as-tab-background/8594/1 "2019-03-04T14:07:14Z")

</div>

Hi,

how can I set a video as background in the Dashboard?  
for a background image, I use the following code, but this does not work for a video.

```auto
<style>
     body {
      background-image: url("/backgroundimage.png");
background-size: cover; 
}
<style>

```

---

<div class="post-metadata">

**Author:** ![Tobi](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Tobi](https://discourse.nodered.org/u/Tobi)\
**Post date:** [4 March 2019 14:11 UTC](https://discourse.nodered.org/t/video-as-tab-background/8594/2 "2019-03-04T14:11:01Z")

</div>

I also start and stop the video depending on the payload. this is the code to play and stop the video:

```auto
<script> 
    (function(scope) {
        var video = document.getElementById('video');
        video.src = "http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.ogv";
                // Watch for messages being send to this template node
        scope.$watch('msg', function (msg) {      
            
            if (msg.payload=="1") {

                video.play();
            }
            else if(msg.payload=="0"){
                //var video = document.getElementById('video');
                //video.src = "http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.ogv";
                video.pause();
            }
         }); 
    })(scope); 
</script>

```

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [4 March 2019 14:55 UTC](https://discourse.nodered.org/t/video-as-tab-background/8594/3 "2019-03-04T14:55:32Z")

</div>

AFAIK - you can't do it with simple CSS.  
You need to build it into the page - ege see - [https://www.w3schools.com/howto/howto\_css\_fullscreen\_video.asp](https://www.w3schools.com/howto/howto_css_fullscreen_video.asp)  
So to do that here you probably need to host your own web page (in Node-RED) then embed the dashboard in that.

Happy to be advised differently though.

---

<div class="post-metadata">

**Author:** ![Tobi](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Tobi](https://discourse.nodered.org/u/Tobi)\
**Post date:** [6 March 2019 07:04 UTC](https://discourse.nodered.org/t/video-as-tab-background/8594/4 "2019-03-06T07:04:34Z")

</div>

ok, that´s too expensive ☹

how do I manage to influence the size of the video?

With the following settings the video appears in the dashboard as folllows  
 ![Unbenannt](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/8/834d16ee757f26afccf90bbde192b3f0b93f9c4c.png)

```auto

<div>
     <video id="video" width="100%" heigth="100%" style="width:800px, height:800px" preload="auto" autoplay="true" loop="loop"></video>
</div>

<script> 
    (function(scope) {
        var video = document.getElementById('video');
        video.src = "/test.mp4"
        //video.src = "http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.ogv";
                // Watch for messages being send to this template node
        scope.$watch('msg', function (msg) {      
            
            if (msg.payload=="1") {

                video.play();
            }
            else if(msg.payload=="0"){
                //var video = document.getElementById('video');
                //video.src = "http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.ogv";
                video.pause();
            }
         }); 
    })(scope); 
</script>
<!--
<style>
    #video {
        position:absolute;
        top: 10vh;
        right: 10vw;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -1000;
        overflow: hidden;
    }
</style>
-->

```

![Unbenannt1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/923e54a5354b2c16d465c158ee4b8b2558d65e04.png)

---

<div class="post-metadata">

**Author:** ![Tobi](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Tobi](https://discourse.nodered.org/u/Tobi)\
**Post date:** [6 March 2019 11:43 UTC](https://discourse.nodered.org/t/video-as-tab-background/8594/5 "2019-03-06T11:43:23Z")

</div>

@dceejay

How do I get my widget to take on the full groups?

my group is 36 wide but I can´t close my widget wider than 27, because I can´t get on the extra rows. But only make the height bigger. Is there a trick?

 ![Unbenannt](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/5bf7a263b6f6fe557c3faafb7cd35bd11dcfd5dc.png)

 ![Unbenannt1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/b4946c932abed5ebb17e334b1d6fcf8e10669ee9.png)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [6 March 2019 12:32 UTC](https://discourse.nodered.org/t/video-as-tab-background/8594/6 "2019-03-06T12:32:16Z")

</div>

Not sure what you mean ? - it's just for setting the size so you can expand it as much as you have monitor space for... here is one I can create.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/3943f08bd7f0688e1ba3fe53250218a1db823109.png)

If you really only want the one group you could also increase the 1x1 cell size on the Dashboard - Site tab to make each cell larger (or smaller)

---

<div class="post-metadata">

**Author:** ![Tobi](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Tobi](https://discourse.nodered.org/u/Tobi)\
**Post date:** [7 March 2019 06:39 UTC](https://discourse.nodered.org/t/video-as-tab-background/8594/7 "2019-03-07T06:39:37Z")

</div>

@dceejay

I will try it with increase the 1x1 cell size.

But what I mean is that I can set the width of the group to 36 see picture below

 ![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/9e71890259344800020c472a4f13c1977d6c3e7d.png)

But I can not set the width of the widgetto this width. Max. widget with ist 27 ☹

 ![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/a/a4869a202132a20d42e51a906773678da2038c83.png)

An other question.

I run Node-RED on a Raspberry Pi and open the Dashboard on the Pi in the Chromium Browser. But the video runs very jerky, is there a possibility, that the video runs better in Chromium?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [7 March 2019 08:40 UTC](https://discourse.nodered.org/t/video-as-tab-background/8594/8 "2019-03-07T08:40:01Z")

</div>

re height you can set he height as far as you can fit on your monitor.

re video - no idea. I'm not an expert on video playback on the Pi.

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [14 November 2019 16:32 UTC](https://discourse.nodered.org/t/video-as-tab-background/8594/9 "2019-11-14T16:32:27Z")

</div>

Here'a a template for a fullscreen video background with crossfading. It bypasses the Dashboard's layout by using position:fixed so it can be set to 1x1 cell size and remain fullscreen.

```auto
<style>
@keyframes fadein {
  0% {opacity: 0}
  100% {opacity: 1}
}
@keyframes fadeout {
  0% {opacity: 1}
  100% {opacity: 0}
}
.fadein {
  animation-name: fadein;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  background-color: black;
}
.fadeout {
  animation-name: fadeout;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  background-color: black;
}
</style>

<div style="background-color: black; width:100%; height:100%; position:fixed; top:0px; left:0px; z-index:0">
</div>

<div style="position:fixed; top:0px; width:100%; height:100%; left:0px; z-index:0">
     <video id="video1" width="100%" height="100%" loop autoplay muted></video>
</div>
<div style="position:fixed; top:0px; width:100%; height:100%; left:0px; z-index:0">
     <video id="video2" width="100%" height="100%" loop autoplay muted></video>
</div>

<script> 
    (function(scope) {
        let currentVideo = 1
        // Watch for messages being send to this template node
        scope.$watch('msg', function (msg) {      
            if (msg) {

                let video1 = document.getElementById('video1');
                let video2 = document.getElementById('video2');
                if (currentVideo == 1){
                    video1.src = msg.payload;
                    document.getElementById("video1").className = "fadein";
                    document.getElementById("video2").className = "fadeout";
                    var playPromise = video1.play();
                    currentVideo = 2;
                }else{
                    video2.src = msg.payload;
                    document.getElementById("video2").className = "fadein";
                    document.getElementById("video1").className = "fadeout";
                    var playPromise = video2.play();
                    currentVideo = 1;
                }
                if (playPromise !== undefined) {
                    playPromise.then(_ => {
                      // Automatic playback started!
                      // Show playing UI.
                    })
                    .catch(error => {
                      // Auto-play was prevented
                      // Show paused UI.
                    });
                }
            }       
         }); 
    })(scope); 
</script>

```

---

<div class="post-metadata">

**Author:** ![EDST](https://avatars.discourse-cdn.com/v4/letter/e/f475e1/32.png) [@EDST](https://discourse.nodered.org/u/EDST)\
**Post date:** [28 January 2020 13:19 UTC](https://discourse.nodered.org/t/video-as-tab-background/8594/10 "2020-01-28T13:19:22Z")

</div>

Hi Hugo, Is there a way to apply your code to the header so the video plays in the background of all tabs and not just a certain one? My HTML/CSS is not great enough to figure out how to structure it.

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [28 January 2020 14:28 UTC](https://discourse.nodered.org/t/video-as-tab-background/8594/11 "2020-01-28T14:28:17Z")

</div>

Hi @EDST! Because of the way the dashboard works, I think the current way to do that would be to duplicate this template for as many tabs as you have.

---

<div class="post-metadata">

**Author:** ![EDST](https://avatars.discourse-cdn.com/v4/letter/e/f475e1/32.png) [@EDST](https://discourse.nodered.org/u/EDST)\
**Post date:** [3 February 2020 09:13 UTC](https://discourse.nodered.org/t/video-as-tab-background/8594/12 "2020-02-03T09:13:51Z")

</div>

Ah the downside to that is the video restarts every time you change tab. Would be nice to have it continuous throughout.

---

<div class="post-metadata">

**Author:** ![deekshaha](https://avatars.discourse-cdn.com/v4/letter/d/e47c2d/32.png) [@deekshaha](https://discourse.nodered.org/u/deekshaha)\
**Post date:** [5 July 2020 19:49 UTC](https://discourse.nodered.org/t/video-as-tab-background/8594/13 "2020-07-05T19:49:13Z")

</div>

If I want to set an image as background of the whole page in a tab, Can you please tell where to post the code and where to save the image that I want as background?  
I am using NODE RED in ibm cloud.