@Reotch2 If you’re still shooting for this, I HIGHLY recommend using ffmpeg to convert the clip to .webm format, which was developed for web streaming video — it’s crazy efficient with file size and perfect for this type of thing. If you’ve never used ffmpeg before it can be daunting, but the gist of what you do is ‘’’ffmpeg -i .mp4 -o .webm’’’ and then let it do its thing. It may take some googling to get exactly the settings you want but a basic conversion should do pretty well for you.

Good luck!

@Reotch2 I actually just was dealing with something similar trying to get that module to work as a background!

Right now I have just a picture instead, but it should be the same idea. Put the video file somewhere on the MagicMirror directory - my image is in the CSS file but it doesn’t matter where. That way it’s included in what’s accessible on MM’s webserver that it starts. That way, in the config, you can specify the URL for the file! On mine, the picture bg.jpg is in the CSS folder, so my file listed in the config is "http://127.0.0.1:8080/css/bg.jpg".

The biggest issue with this is that AFAIK it’s liable to get erased in updates to the MagicMirror framework, since I’m pretty sure the only two files that don’t get touched are config.js and custom.css. I’m also pretty sure that someone smarter than I has figured out a great way to get around that. BUt, since it’s just for halloween it’s probably temporary anyways so hopefully this gets you up and going.
PS that is a cool as hell idea!

Sorry for the double post! For some reason my previous topic can’t be replied to (by myself or others), so I have to make a new one.
@j-e-f-f was kind enough to get back to me very quickly, and here’s what he told me:

You have a syntax error in your CSS snippet, and I’m wondering if it’s actually affecting the script on the page…
In any case, you need to do two things to get your background to animate:
you need to close the rule for .region.fullscreen.below. You’re missing the trailing } after animation: gradient 30s ease infinite;.
You need to give your background a size that is bigger than 100%. Otherwise, there’s nothing to animate.
Also, when working with the Electron browser, there’s no need to use the -webkit- prefixes. These CSS properties will all work natively.
Here is a working example:

.region.fullscreen.below {
  background: linear-gradient(208deg, #15304d, #459fff);
  background-size: 400% 400%;
  animation: gradient 30s ease infinite;
}
@keyframes gradient { 
  0%    {background-position: 25% 0%;}
  50%   {background-position: 76% 100%;}
  100%  {background-position: 25% 0%;}
  }
}

I adjusted the colours to exaggerate the gradient a little… tweak to your liking.

The good news is that it worked really well, and I’m very appreciative! The bad news is that my raspberry pi 3 was not. Long story short, Electron was super struggling to render it, and the machine was giving warnings about overheating – I checked it with vcgencmd measure_temp, and its operating temperature was ~85.1ºC!!! So uh, here’s the solution for anyone that wants to try but that said, please don’t overcook your pies.

In the meantime, I’ll stick with a nice non-lethal background picture.

I actually just made a comment explaining how I managed to get a CSS gradient in the background and not just the margins, but I’m still not quite where I want to be. I’m working on a vertical display board for the side of my fridge instead of a mirror, and it would be absolutely killer to have a slowly scrolling gradient, like the ones generated here and here (along with, I’m sure, a ton of other places!).
My issue is though, while I can generate a static gradient that looks nice enough, I cannot for the life of me get it to animate. I have no idea why. Is this type of CSS animation just not doable in the MM framework, do I have to put it in its own <div> or something? I have no idea.
Here’s the relevant part of my custom.css file:

.region.fullscreen.below {
  background: linear-gradient(208deg, #235182, #196586);
  -webkit-animation: gradient 30s ease infinite;
  animation: gradient 30s ease infinite;

@-webkit-keyframes gradient {
  0%{background-position:25% 0%}
  50%{background-position:76% 100%}
  100%{background-position:25% 0%}
  }
@keyframes gradient { 
  0%{background-position:25% 0%}
  50%{background-position:76% 100%}
  100%{background-position:25% 0%}
  }
}

I’m not entirely sure what they do or what they’re called, but I’ve tried this with the @keyframes part inside and outside the .region element, above and below. Still nothing. :shruggie:
If it’s possible, it seems like it’d be super cool. Maybe I could try and put it in a module based on the MMM-ProfilePicture module that I’ve been using until recently?
Sorry if this is a dumb and obvious question, and also thanks!

In case anyone else is coming into this thread looking for answers, I’ve been stumped on this same problem for awhile and think I got it working (instead of trying to put a picture, I wanted a CSS gradient in the background for various reasons).

What I’ve been running into is this: if I put my desired background: info in the body { } portion of the CSS file, it fills up the middle part, but the margins are white. If I put it in the html { } portion, I can make a nice border that fills the margins, but now the inside isn’t covered.

After looking through the main.css file (and running enough attempts to lock myself out of the fitbit API), I appear to have gotten it by adding my background: under .region.fullscreen.below. Not knowing how CSS works, I of course only recently figured out that this has to be outside the body{} designation that comes standard in the custom.css file. The code looks kind of like this:

body {	
}

.region.fullscreen.below {
  background: linear-gradient(208deg, #235182, #196586);
}

Hope this helps anyone else.

@mochman Okay! I put up a request right here for it, and tossed up a picture for reference.

Really appreciate you checking this out for me, what you have is already great

Module works quite well for me as installed, but I do have one thing I can’t seem to puzzle out.

I may well be missing something - and my apologies if so - but I can’t seem to find it based on everything I’ve read. Is there a way to display multiple thermostats in a single row with a visual display? Right now I’ve enabled both by adding separate instances in the config, which works just fine to make them stack on top of each other, but it looks kinda silly having the two circles on top of each other with a big space to the side.

I’m assuming there’s some form of custom CSS magic involved, but I’m new to that and can’t seem to get a single module instance to display both thermostats in the first place.

Either way, thanks so much!!