That did it! Thank You 
Does anybody know about other mp4 served files like the ones for the weather, that are documented in this add-on ? Videos in other categories (such as “abstract”, “technology”, etc)? Idea is to use this add-on not only for weather related topics and entities but simply a a way to serve any beautiful background.
I can for sure use locally stored mp4 and this works very well when using HA within my house, but when consulting HA outside my house then it can take quite some times until the background video is fully loaded (poor raspberry pi 3 + uplink on DSL is always slower than downlink).
1 Like
Hi There, I probably need some help to get this working,
I use Rapsberry Pi with Home Assistant installed on it on venv…
I installed this using HACS method, verified that entry in resources is added, then I put this to my lovelace config:
animated_background:
default_url: 'https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4'
groups:
- name: weather
config:
entity: weather.home
state_url:
sunny:
- 'https://cdn.flixel.com/flixel/hlhff0h8md4ev0kju5be.hd.mp4'
- 'https://cdn.flixel.com/flixel/zjqsoc6ecqhntpl5vacs.hd.mp4'
- 'https://cdn.flixel.com/flixel/jvw1avupguhfbo11betq.hd.mp4'
- 'https://cdn.flixel.com/flixel/8cmeusxf3pkanai43djs.hd.mp4'
- 'https://cdn.flixel.com/flixel/guwb10mfddctfvwioaex.hd.mp4'
partlycloudy:
- 'https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4'
- 'https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4'
- 'https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4'
- 'https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4'
- 'https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4'
- 'https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4'
cloudy:
- 'https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4'
- 'https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4'
- 'https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4'
- 'https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4'
- 'https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4'
- 'https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4'
mostlycloudy:
- 'https://cdn.flixel.com/flixel/e95h5cqyvhnrk4ytqt4q.hd.mp4'
- 'https://cdn.flixel.com/flixel/l2bjw34wnusyf5q2qq3p.hd.mp4'
- 'https://cdn.flixel.com/flixel/rrgta099ulami3zb9fd2.hd.mp4'
clear-night:
- 'https://cdn.flixel.com/flixel/x9dr8caygivq5secll7i.hd.mp4'
- 'https://cdn.flixel.com/flixel/v26zyfd6yf0r33s46vpe.hd.mp4'
- 'https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4'
- 'https://cdn.flixel.com/flixel/rosz2gi676xhkiw1ut6i.hd.mp4'
fog:
- 'https://cdn.flixel.com/flixel/vwqzlk4turo2449be9uf.hd.mp4'
- 'https://cdn.flixel.com/flixel/5363uhabodwwrzgnq6vx.hd.mp4'
rainy: 'https://cdn.flixel.com/flixel/f0w23bd0enxur5ff0bxz.hd.mp4'
views:
- path: default_view
title: Home
cards:
- entity: weather.home
type: weather-forecast
- path: display
title: Display
animated_background: weather
cards:
- entity: weather.home
type: weather-forecast
I wanted to test it just on default config so I left the weather trigger.
But It doesnt’ seem to change anything, restarted HA but also no joy…
So what I’m doing wrong ?
1 Like
Are you seeing any background at all?
Your formatting is slightly off (views should be on the same indentation level as animated_background), but it works on my test instance
Also what version of HA are you running?
Thanks for the replay. I made some progress but not much.
Home assistant : ver 0.116.4
I noticed error in formatting, now it looks like this:
animated_background:
default_url: 'https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4'
groups:
- name: weather
config:
entity: weather.home
state_url:
sunny:
- 'https://cdn.flixel.com/flixel/hlhff0h8md4ev0kju5be.hd.mp4'
- 'https://cdn.flixel.com/flixel/zjqsoc6ecqhntpl5vacs.hd.mp4'
- 'https://cdn.flixel.com/flixel/jvw1avupguhfbo11betq.hd.mp4'
- 'https://cdn.flixel.com/flixel/8cmeusxf3pkanai43djs.hd.mp4'
- 'https://cdn.flixel.com/flixel/guwb10mfddctfvwioaex.hd.mp4'
partlycloudy:
- 'https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4'
- 'https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4'
- 'https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4'
- 'https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4'
- 'https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4'
- 'https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4'
cloudy:
- 'https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4'
- 'https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4'
- 'https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4'
- 'https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4'
- 'https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4'
- 'https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4'
mostlycloudy:
- 'https://cdn.flixel.com/flixel/e95h5cqyvhnrk4ytqt4q.hd.mp4'
- 'https://cdn.flixel.com/flixel/l2bjw34wnusyf5q2qq3p.hd.mp4'
- 'https://cdn.flixel.com/flixel/rrgta099ulami3zb9fd2.hd.mp4'
clear-night:
- 'https://cdn.flixel.com/flixel/x9dr8caygivq5secll7i.hd.mp4'
- 'https://cdn.flixel.com/flixel/v26zyfd6yf0r33s46vpe.hd.mp4'
- 'https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4'
- 'https://cdn.flixel.com/flixel/rosz2gi676xhkiw1ut6i.hd.mp4'
fog:
- 'https://cdn.flixel.com/flixel/vwqzlk4turo2449be9uf.hd.mp4'
- 'https://cdn.flixel.com/flixel/5363uhabodwwrzgnq6vx.hd.mp4'
rainy: 'https://cdn.flixel.com/flixel/f0w23bd0enxur5ff0bxz.hd.mp4'
title: Domek
resources:
- url: /local/bignumber-card.js
type: module
- url: /local/mini-graph-card-bundle.js?v=0.9.4
type: module
views:
- path: default_view
title: Przegląd
badges:
- entity: person.staszek
- entity: person.aga
- entity: person.radek
- entity: sun.sun
- entity: sensor.grid_sell_energy_day
name: Sieć
so Your code is on very top of the settings page.
Still no joy - nothing…
Then I figured - I use theme ‘yourname’ which contains background image. So maybe it is hidden… So I changed the theme to default - YES - I can see animation finally, but only that one in space (default), and only partially as animation is hidden below all cards (no transparency).
So i returned to my ‘yourname’ theme, but I removed the original background file. And it works, I can see animation, but again - only the default one.
Also what theme can I use with this backgrounds to have view on booth - cards and background?
And what to do to have animations changed ?
OK I managed to get this working.
animated_background: weather was the key - I added this to every view I have, and it started working… Have to figure why it shows me animations from cloudy day in the late evening but in general it works 
When I changed the state to clear-night via dev tools - it showed me nightly images so it is ok - my weather.home must be the reason…
But now I have a different problem… My Pi died after this ( A few times chromium crashed informing me that I need to reload page, So i added more ram to graphics card - about 500mb, restarted… and … all I can see now is the upper left corner cursor… No system on screen, no ssh possible…
Ok - after 2 hours of heart atack I managed to recover my Pi
But problem is still there - Animations works fine, but after few minutes, chromium card gets crash…Not sure what that means??
I’m relatively new to this stuff (rapsbery) - What i have is Home assistant that runs on venv, mqtt, zigbee2mqtt (with usb dongle as the receiver) and this runs fine. Pi is version 4B with 4 Gb ram. SD 32 Gb. When animations are activated, it starts to crahs (chromium - not a whole Pi), but it is unusable anyway… Any thoughts?
EDIT:
I finally managed to get this work, but since I’m using weather.home that is built in Home Assistant, updates are not so frequent. Changing background would be nice (without weather state change). If it is possible to change it, say every xx minutes, while entity state is not changed? Ie. one sunny image to another?
Also, I have problem with nightly images - my weather sensor never goes into night state (mainly sunny, cloudy, and fog)… I’d like to have the videos divided (2 groups - night and day), and then: if day and weather state sunny, then background sunny, if night and weather state sunny then background clear_night and so on Is it possible ?
Hey,
Thanks for making this 
it’s very nice.
I’m trying to use the “enabled” parameter to make my setup more dynamic, but somehow i can’t get it to work. i’ve tried:
enabled: "[[[ return is_state('input_select.mode_selector', 'weather') ]]]"
enabled: {{ is_state('input_select.mode_selector', 'weather') }}
And also if statements, but i doesn’t seem to work. Is it possible atm to set enabled to read a state?
1 Like
Can someone have a look what I’m doing wrong?
I have following set-up (1:1 as per instructions…), but nothing is displayed/changed…
animated_background:
default_url: 'https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4'
included_users:
- dariusz
entity: weather.home
state_url:
sunny:
- 'https://cdn.flixel.com/flixel/hlhff0h8md4ev0kju5be.hd.mp4'
- 'https://cdn.flixel.com/flixel/zjqsoc6ecqhntpl5vacs.hd.mp4'
- 'https://cdn.flixel.com/flixel/jvw1avupguhfbo11betq.hd.mp4'
- 'https://cdn.flixel.com/flixel/8cmeusxf3pkanai43djs.hd.mp4'
- 'https://cdn.flixel.com/flixel/guwb10mfddctfvwioaex.hd.mp4'
partlycloudy:
- 'https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4'
- 'https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4'
- 'https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4'
- 'https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4'
- 'https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4'
- 'https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4'
cloudy:
- 'https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4'
- 'https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4'
- 'https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4'
- 'https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4'
- 'https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4'
- 'https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4'
mostlycloudy:
- 'https://cdn.flixel.com/flixel/e95h5cqyvhnrk4ytqt4q.hd.mp4'
- 'https://cdn.flixel.com/flixel/l2bjw34wnusyf5q2qq3p.hd.mp4'
- 'https://cdn.flixel.com/flixel/rrgta099ulami3zb9fd2.hd.mp4'
clear-night:
- 'https://cdn.flixel.com/flixel/x9dr8caygivq5secll7i.hd.mp4'
- 'https://cdn.flixel.com/flixel/v26zyfd6yf0r33s46vpe.hd.mp4'
- 'https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4'
- 'https://cdn.flixel.com/flixel/rosz2gi676xhkiw1ut6i.hd.mp4'
fog:
- 'https://cdn.flixel.com/flixel/vwqzlk4turo2449be9uf.hd.mp4'
- 'https://cdn.flixel.com/flixel/5363uhabodwwrzgnq6vx.hd.mp4'
rainy: 'https://cdn.flixel.com/flixel/f0w23bd0enxur5ff0bxz.hd.mp4'
title: Home
views:
The resource URL is not /config/www/..., it would be /local/...
/config/www is your directory path. When translating it to a URL it resolves to /local
Thank you for reply… I changed to :
…
/local/config/etc.
…
restarted but do not see visible change…
Still something (?)…
No, not /local/config, just /local. Your url would be /local/animated-background.js
Darek I have it in home/homeassistant/.homeassistant/www/animated-background.js
In resources this is referenced as /local/animated-background.js
Remember to change in your profile theme to backend sellected
Changed the path. Also is set to backend selected… But still nothing.
Is it difference in case I have ‘hassio’…?
O.K. I investigated the reason - > wrong parameter ‘included_users’.
I should use full username…
Now it works.
Thank you for great work! Looks very nice!
Hello @villhellm, I´ve been using your card for a long time (eve before Dr Zzzs made it famous), but I noticed that since the las HA update it loads just one pass of a video and then stops.
Any breaking change I didn´t notice?
Thanks!
3 Likes
— Sorry for posting this here but its the only background-related thing that i could find —
Im trying to add a javascript background to my dashboard.
Could somebody guide me which things I need to do?
1 Like
How do I make all the cards translucent at once? I don’t want to insert a code for translucency in every card.
Как сделать все карточки сразу полупрозрачными? Не хочется вставлять в каждую карточку код для полупрозрачности.
cards:
- type: weather-forecast
entity: weather.home_assistant
style: |
ha-card { opacity: 0.6 }
secondary_info_attribute: humidity
- type: alarm-panel
states:
- arm_home
- arm_away
entity: alarm_control_panel.xiaomi_gateway_alarm
- title: тест
path: ''
badges: []
cards: []
hey if you find how, be sure to let me know!
I also am having troubles to use local .mp4 files to use as background… for some reason the only ones working are the ones provided in the example and I cant find the way to link to my local /media folder to use the vids inside it instead… 