{"id":13622533,"url":"https://github.com/Villhellm/lovelace-animated-background","last_synced_at":"2025-04-15T09:32:48.844Z","repository":{"id":41490052,"uuid":"202743061","full_name":"Villhellm/lovelace-animated-background","owner":"Villhellm","description":"Animated backgrounds for lovelace ","archived":false,"fork":false,"pushed_at":"2024-04-03T22:43:51.000Z","size":110,"stargazers_count":191,"open_issues_count":20,"forks_count":60,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-08-01T21:53:58.228Z","etag":null,"topics":["animated","background","hacktoberfest"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Villhellm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-08-16T14:33:52.000Z","updated_at":"2024-07-02T17:27:56.000Z","dependencies_parsed_at":"2024-03-18T21:12:16.931Z","dependency_job_id":"3a485bbf-9153-46fd-b3f2-4c211252341b","html_url":"https://github.com/Villhellm/lovelace-animated-background","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Villhellm%2Flovelace-animated-background","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Villhellm%2Flovelace-animated-background/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Villhellm%2Flovelace-animated-background/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Villhellm%2Flovelace-animated-background/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Villhellm","download_url":"https://codeload.github.com/Villhellm/lovelace-animated-background/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223668212,"owners_count":17182893,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animated","background","hacktoberfest"],"created_at":"2024-08-01T21:01:20.784Z","updated_at":"2024-11-08T10:30:28.920Z","avatar_url":"https://github.com/Villhellm.png","language":null,"funding_links":[],"categories":["Others"],"sub_categories":[],"readme":"# MAJOR BREAKING CHANGE IN v0.5.0+\nYOUR ANIMATED BACKGROUND CONFIGURATION WILL NEED TO BE UPDATED, follow the new configuration guidelines below.\n\n# Animated Lovelace Background\n\nThis module is for [Lovelace](https://www.home-assistant.io/lovelace) on [Home Assistant](https://www.home-assistant.io/)\n\nCreate animated backgrounds based on the state of one of your entities. Originally designed for changing with the weather, à la [VideoBackground-Card](https://github.com/Perdemot/Lovelace-Cards/tree/master/VideoBackground-Card), you can now choose any entity in home assistant and create an animated background for each of its states.\n\nA big thanks to [Customer Header](https://github.com/maykar/custom-header) and [VideoBackground-Card](https://github.com/Perdemot/Lovelace-Cards/tree/master/VideoBackground-Card) for the inspiration.\n\nExample:\n![Example](https://raw.githubusercontent.com/Villhellm/README_images/master/Animation.gif)\n\n## Installation Method 1: Manual\n\n### Step 1\n\nInstall `animated-background` by copying `animated-background.js` from this repo to `\u003cconfig directory\u003e/www/animated-background.js` on your Home Assistant instance.\n\n### Step 2\n\nAdd the resource to your configuration. If you are in yaml mode follow [the lovelace docs](https://www.home-assistant.io/lovelace/dashboards-and-views/#resources). If you are using the UI to manage resources then go you `\u003cyour-ha-address\u003e/config/lovelace/resources` and add the URL `/local/animated-background.js` as a javascript module. \n\n### Step 3\n\nAdd the custom element in the root of your `ui-lovelace.yaml` (or Lovelace raw configuration if not in yaml mode), not in a view or card.\nEx:\n```yaml\nanimated_background:\n  default_url: \"https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4\"\n  included_users:\n    - Villhellm\n  # This entity is just an example, use whatever entity you would like\n  entity: \"weather.home\"\n  state_url:\n    'sunny':\n      - \"https://cdn.flixel.com/flixel/hlhff0h8md4ev0kju5be.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/zjqsoc6ecqhntpl5vacs.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/jvw1avupguhfbo11betq.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/8cmeusxf3pkanai43djs.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/guwb10mfddctfvwioaex.hd.mp4\"\n\n    'partlycloudy':\n      - \"https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4\"\n\n    'cloudy':\n      - \"https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4\"\n\n    'mostlycloudy':\n      - \"https://cdn.flixel.com/flixel/e95h5cqyvhnrk4ytqt4q.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/l2bjw34wnusyf5q2qq3p.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/rrgta099ulami3zb9fd2.hd.mp4\"\n\n    'clear-night':\n      - \"https://cdn.flixel.com/flixel/x9dr8caygivq5secll7i.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/v26zyfd6yf0r33s46vpe.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/rosz2gi676xhkiw1ut6i.hd.mp4\"\n\n    'fog':\n      - \"https://cdn.flixel.com/flixel/vwqzlk4turo2449be9uf.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/5363uhabodwwrzgnq6vx.hd.mp4\"\n\n    'rainy': \"https://cdn.flixel.com/flixel/f0w23bd0enxur5ff0bxz.hd.mp4\"\n\ntitle: Home\nviews: ...\n```\n\n## Installation Method 2: HACS\n\n### Step 1\n\nMake sure you have [HACS](https://github.com/custom-components/hacs) installed, find Animated Background in the plug section, and install.\n\n### Step 2\n\nAdd the resource to your configuration. If you are in yaml mode follow [the lovelace docs](https://www.home-assistant.io/lovelace/dashboards-and-views/#resources) and add the URL `/hacsfiles/lovelace-animated-background/animated-background.js` as a module. If you are using the UI to manage resources then click the button at the top of the Animated Background HACS page to automatically add it to your resources.\n\n### Step 3\n\nAdd the custom element in the root of your `ui-lovelace.yaml` (or Lovelace raw configuration if not in yaml mode), not in a view or card.\nEx:\n```yaml\nanimated_background:\n  default_url: \"https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4\"\n  included_users:\n    - Villhellm\n  # This entity is just an example, use whatever entity you would like\n  entity: \"weather.home\"\n  state_url:\n    'sunny':\n      - \"https://cdn.flixel.com/flixel/hlhff0h8md4ev0kju5be.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/zjqsoc6ecqhntpl5vacs.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/jvw1avupguhfbo11betq.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/8cmeusxf3pkanai43djs.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/guwb10mfddctfvwioaex.hd.mp4\"\n\n    'partlycloudy':\n      - \"https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4\"\n\n    'cloudy':\n      - \"https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4\"\n\n    'mostlycloudy':\n      - \"https://cdn.flixel.com/flixel/e95h5cqyvhnrk4ytqt4q.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/l2bjw34wnusyf5q2qq3p.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/rrgta099ulami3zb9fd2.hd.mp4\"\n\n    'clear-night':\n      - \"https://cdn.flixel.com/flixel/x9dr8caygivq5secll7i.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/v26zyfd6yf0r33s46vpe.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/rosz2gi676xhkiw1ut6i.hd.mp4\"\n\n    'fog':\n      - \"https://cdn.flixel.com/flixel/vwqzlk4turo2449be9uf.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/5363uhabodwwrzgnq6vx.hd.mp4\"\n\n    'rainy': \"https://cdn.flixel.com/flixel/f0w23bd0enxur5ff0bxz.hd.mp4\"\n\n\ntitle: Home\nviews: ...\n```\n\n# Configuration\n\nConfiguration for Animated Background goes into the root of your Lovelace config.\n\n## Animated Background Configuration Options\n\n| Name | Type | Requirement | Description\n| ---- | ---- | ------- | -----------\n| default_url | string or list(string) | **Optional** | If no matching state is found, this is the fallback video url. You can either define a single url or an array. If an array is defined then a random video will be selected from that array.\n| enabled | bool | **Optional** | Set to false to disable Animated Background\n| display_user_agent | bool | **Optional** | If set to true you will get an alert with your current user agent. This will help determine your device to use in `excluded_devices` or `included_devices`\n| debug | bool | **Optional** | Get more detailed log messages\n| views | list ([views](#view-configuration)) | **Optional** | Allows you to set custom configurations per view\n| groups | list ([group](#group-configuration)) | **Optional** | Allows you to set custom configurations that can be referenced in lovelace view configurations\n| entity | string | **Optional** | Entity to check for state changes\n| state_url | map | **Optional** | Map of states and video or image urls. Any mp4, webm, or image link will work, even relative `/local/` links. Using locally stored videos will greatly improve loading times. It is recommended to 'cinemagraphs', these videos are only a few seconds long and are meant to loop . Set to 'none' to disable background for the defined state (see example). You can either define a single url or an array. If an array is defined then a random video will be selected from that array. Required if `entity` is defined.\n| included_users | list (string) | **Optional** | List of users that will display animated background. If this option is set any users not included in this list will be excluded.\n| included_devices | list (string) | **Optional** | List of devices that will display animated background. If this option is set any devices not included in this list will be excluded. Ex:  iphone, ipad, windows, macintosh, android\n| excluded_users | list (string) | **Optional** | Users to be excluded\n| excluded_devices | list (string) | **Optional** | Devices to be excluded Ex:  iphone, ipad, windows, macintosh, android\n\nWhile all entries are optional, it is recommended to at least set `default_url` or `entity` with `state_url`. Without one of those set you would never know this plugin was installed. \n\n## View Configuration\n\n| Name | Type | Requirement | Description\n| ---- | ---- | ------- | -----------\n| path | string | **Required** | The path to the Lovelace view you want to configure. Whatever comes after `/lovelace/` in your view's url. Even if you are using a different dashboard than `/lovelace/`, you still just use the last part of the url.\n| config | [config](#stored-config) | **Required** | See [stored config](#stored-config) for requirements and options\n\nEx:\n```yaml\nanimated_background:\n  default_url: \"https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4\"\n  included_users:\n    - Villhellm\n  # This entity is just an example, use whatever entity you would like\n  entity: \"weather.home\"\n  state_url:\n    'sunny':\n      - \"https://cdn.flixel.com/flixel/hlhff0h8md4ev0kju5be.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/zjqsoc6ecqhntpl5vacs.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/jvw1avupguhfbo11betq.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/8cmeusxf3pkanai43djs.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/guwb10mfddctfvwioaex.hd.mp4\"\n\n    'partlycloudy':\n      - \"https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4\"\n\n    'cloudy':\n      - \"https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4\"\n\n    'mostlycloudy':\n      - \"https://cdn.flixel.com/flixel/e95h5cqyvhnrk4ytqt4q.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/l2bjw34wnusyf5q2qq3p.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/rrgta099ulami3zb9fd2.hd.mp4\"\n\n    'clear-night':\n      - \"https://cdn.flixel.com/flixel/x9dr8caygivq5secll7i.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/v26zyfd6yf0r33s46vpe.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/rosz2gi676xhkiw1ut6i.hd.mp4\"\n\n    'fog':\n      - \"https://cdn.flixel.com/flixel/vwqzlk4turo2449be9uf.hd.mp4\"\n      - \"https://cdn.flixel.com/flixel/5363uhabodwwrzgnq6vx.hd.mp4\"\n\n    'rainy': \"https://cdn.flixel.com/flixel/f0w23bd0enxur5ff0bxz.hd.mp4\"\n  views:\n    - path: gaming\n      config:\n        default_url: \"https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4\"\n        entity: \"light.game_room\"\n        state_url:\n          'on':  \"https://cdn.flixel.com/flixel/8cmeusxf3pkanai43djs.hd.mp4\"\n          'off': \"https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4\"\ntitle: Home\nviews: ...\n```\n\n## Group Configuration\n\n| Name | Type | Requirement | Description\n| ---- | ---- | ------- | -----------\n| name | string | **Required** | The name you would like to use to define your group.\n| config | [config](#stored-config) | **Required** | See [stored config](#stored-config) for requirements and options\n\nGroups can be used to easily reuse Animated Background configurations. After defining your `groups:` block with at least one entry, you can add a single line to any of your views to use this configuration. \n\nEx:\n```yaml\nanimated_background:\n  default_url: \"https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4\"\n  groups:\n    - name: weather\n      config:\n        entity: \"weather.home\"\n        state_url:\n          'sunny':\n            - \"https://cdn.flixel.com/flixel/hlhff0h8md4ev0kju5be.hd.mp4\"\n            - \"https://cdn.flixel.com/flixel/zjqsoc6ecqhntpl5vacs.hd.mp4\"\n            - \"https://cdn.flixel.com/flixel/jvw1avupguhfbo11betq.hd.mp4\"\n            - \"https://cdn.flixel.com/flixel/8cmeusxf3pkanai43djs.hd.mp4\"\n            - \"https://cdn.flixel.com/flixel/guwb10mfddctfvwioaex.hd.mp4\"\n\n          'partlycloudy':\n            - \"https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4\"\n            - \"https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4\"\n            - \"https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4\"\n            - \"https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4\"\n            - \"https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4\"\n            - \"https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4\"\n\n          'cloudy':\n            - \"https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4\"\n            - \"https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4\"\n            - \"https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4\"\n            - \"https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4\"\n            - \"https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4\"\n            - \"https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4\"\n\n          'mostlycloudy':\n            - \"https://cdn.flixel.com/flixel/e95h5cqyvhnrk4ytqt4q.hd.mp4\"\n            - \"https://cdn.flixel.com/flixel/l2bjw34wnusyf5q2qq3p.hd.mp4\"\n            - \"https://cdn.flixel.com/flixel/rrgta099ulami3zb9fd2.hd.mp4\"\n\n          'clear-night':\n            - \"https://cdn.flixel.com/flixel/x9dr8caygivq5secll7i.hd.mp4\"\n            - \"https://cdn.flixel.com/flixel/v26zyfd6yf0r33s46vpe.hd.mp4\"\n            - \"https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4\"\n            - \"https://cdn.flixel.com/flixel/rosz2gi676xhkiw1ut6i.hd.mp4\"\n\n          'fog':\n            - \"https://cdn.flixel.com/flixel/vwqzlk4turo2449be9uf.hd.mp4\"\n            - \"https://cdn.flixel.com/flixel/5363uhabodwwrzgnq6vx.hd.mp4\"\n\n          'rainy': \"https://cdn.flixel.com/flixel/f0w23bd0enxur5ff0bxz.hd.mp4\"\nviews:\n  - path: home\n    title: Home\n    cards:\n      - entity: weather.home\n        type: weather-forecast\n  - path: display\n    title: Display\n    animated_background: weather #this is the line to add to your view to use the \"weather\" group configuration.\n    #Set to 'none' if you would like to disable the background for this view\n    cards:\n      - entity: weather.home\n        type: weather-forecast\n```\n\n## Stored Config\n\n| Name | Type | Requirement | Description\n| ---- | ---- | ------- | -----------\n| default_url | string or list(string) | **Optional** | If no matching state is found, this is the fallback video url. You can either define a single url or an array. If an array is defined then a random video will be selected from that array.\n| enabled | bool | **Optional** | Set to false to disable Animated Background\n| entity | string | **Optional** | Entity to check for state changes\n| state_url | map | **Optional** | Map of states and video or image urls. Any mp4, webm, or image will work, even relative `/local/` links. Using locally stored videos will greatly improve loading times. It is recommended to 'cinemagraphs', these videos are only a few seconds long and are meant to loop . Set to 'none' to disable background for the defined state (see example). You can either define a single url or an array. If an array is defined then a random video will be selected from that array. Required if `entity` is defined.\n| included_users | list (string) | **Optional** | List of users that will display animated background. If this option is set any users not included in this list will be excluded.\n| included_devices | list (string) | **Optional** | List of devices that will display animated background. If this option is set any devices not included in this list will be excluded. Ex:  iphone, ipad, windows, macintosh, android\n| excluded_users | list (string) | **Optional** | Users to be excluded\n| excluded_devices | list (string) | **Optional** | Devices to be excluded Ex:  iphone, ipad, windows, macintosh, android\n| background | string | **Optional** | CSS option for the background overlay. Default is 'transparent'\n\n## Example if you want a different background for night and day when a switch changes (or any combination of entities)\nA few people have asked about tying this to multiple entities. The good news is this is already possible with the use of a template sensor. Here is an example of a template sensor that would allow a different background for night/day when a bedroom switch changes.\n\nconfiguration.yaml\n```yaml\nsensor:\n  - platform: template\n    sensors:\n      sun_bedroom:\n        friendly_name: \"Sun and Bedroom\"\n        value_template: \"{{states('sun.sun') + '-' + states('switch.bedroom')}}\"\n        #this will return a state like 'above_horizon-on'\n```\n\n`sun.sun` has two states, `above_horizon` and `below_horizon` AKA day and night.\nSo now if you use `sensor.sun_bedroom` instead of just `switch.bedroom`, the beginning of the state will give you the binary state of the sun's position.\nHere is an example of an Animated Background configuration that will use this sensor to give a different background based on the switch *and* whether it is day or night.\n\nui-lovelace.yaml (or raw configuration)\n```yaml\nanimated_background:\n  default_url: \"https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4\"\n  entity: \"sensor.sun_bedroom\"\n  state_url:\n    'above_horizon-on': \"https://cdn.flixel.com/flixel/hlhff0h8md4ev0kju5be.hd.mp4\"\n\n    'below_horizon-on': \"https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4\"\n\n    'above_horizon-off': \"https://cdn.flixel.com/flixel/zjqsoc6ecqhntpl5vacs.hd.mp4\"\n\n    'below_horizon-off': \"https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4\"\n    \n```\n\n# Warning to mobile users\nWhile I've done my best to perfect the device/user exceptions, I am not perfect. If you are using a mobile device and using an exception to prevent Animated Background from loading, please keep an eye on the Home Assistant app data use. If you notice unusually high usage after installing the plugin open an issue immediately and I will do my best to fix it. With the way themes function after Home Assistant .108 it is possible that the background video is being loaded behind the theme background (though I am pretty sure I've caught and destroyed all the bugs in that area).\n\nIf you plan on *using* Animated Background on a mobile device, be aware that this will most likely use a lot of mobile data.\n\n[Troubleshooting](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FVillhellm%2Flovelace-animated-background","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FVillhellm%2Flovelace-animated-background","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FVillhellm%2Flovelace-animated-background/lists"}