In today’s video we are going to take a look at Adding animated videos to your home assistant dashboard.

Thanks to Roman on Github for forking the original and getting the integration working again.

REQUIREMENTS

• Home Assistant installed and running
• Community Store (HACS) installed
• File editor Addon from the addon store installed

Installation

Once you have all home assistant and the addons installed including HACS we can start.

Step 1

Head over to the repository of Roman (rbogdanov) lovelace-animated-background we are going to need to download the animated-background.js <(direct link to file)

Save the file on your computer and make sure the name is still exactly the same animated-background.js

Step 2

We need to add this file to Home Assistant in the following folder <config directory>/www/animated-background.js
If you have a clean install you may not have this folder and you would need to create it.

Step 3

After adding the downloaded file to Home Assistant we would also need to Add the resource to our configuration. Go to <your-ha-address>/config/lovelace/resources and add the URL /local/animated-background.js as a javascript module. OR see location below.

Step 4

Adding the Raw code to dashboards
Keep in mind that this specific code is making use of the entity: weather.home to display specific videos based on the current time and weather this is also using videos from a remote URL and would require you to have a internet connection to work.
Some Newer installs I did, did not have this installed by default you can find it under integrations and look for Meteorologisk institutt (Met.no) once added you should have the entity Make sure to confirm the entity ID as this could be different than what I have.

• Go to the Dashboard you would like to add the animated backgrounds to then click on the top right edit dashboard option.
• Depending on your config you will get a popup message or see a option to select “raw configuration editor” If you see “raw configuration editor” click on it and skip the next bullet.
• If you see a popup “Edit dashboard” next to it you should see options menu you can click on to open the “raw configuration editor”
  

The text in the code box below can be added to the top of the RAW configuration Editior Do not replace any of the existing text you have in there.
NB If you have already used the static background image on a specific view on a dashboard you will need to remove this as it could interfere with the videos showing.

CODE

animated_background:
  default_url: https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4
  opacity: 80
  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
    lightning:
      - https://cdn.flixel.com/flixel/sbk5sc03j7vay52r3e4o.hd.mp4
    snowy-rainy:
      - https://cdn.flixel.com/flixel/ykgpjn09rt49e8e1qx3b.hd.mp4
    snowy:
      - https://cdn.flixel.com/flixel/ykgpjn09rt49e8e1qx3b.hd.mp4

Conclusion

You should now have your animated video backgrounds working.
If you are still running into issues you may need to clear your browser Data for this to show correctly.
NB PLEASE MAKE SURE YOU ARE USING THE CORRECT ENTITY NAME IN THE CODE PROVIDED.