Lovelace: Weather Mp4 Backgrounds

Do you have a windows computer you could test it on or a phone?

I already tested it on my Smartphone but having the same resultā€¦ no weather card shownā€¦ only the background

Iā€™d open the developer console and see whatā€™s up, there might be an error in there, plus you can check the HTML thatā€™s generated and see if the div is getting populated at all.

Is this what you were talking about?

can you post an image of what it looks like on your screen?

Here it is:

Looks fine.
if you want the card detailing the weather on top you have to add the card for that:

my card only provides the background :wink:

If you open the card you can see this code snippet:

This part defines which Iframe is used for each weather condition.
The ones which are commented are the conditions, where I havenā€™t found a suitable video for.

In the weather animations folder, you can find all the html pages that get loaded into the iframe.
There you can change the url of the video or even go crazy with whatever you want to do with the background.

If you read some messages above, i posted the entire configuration regarding your custom cardā€¦
BTW Here it is again:

  - url: /local/weatherbg-card.js
    type: module

  - icon: mdi:weather-cloudy
    id: meteo2
    title: Meteo2
    cards:
      - type: "custom:weatherbg-card"
        weather: weather.meteo_darksky

And here it is the weather card:

  - type: custom:dark-sky-weather-card
    title: Meteo
    entity_weather: weather.meteo_darksky
    entity_sun: sun.sun
    entity_daily_summary: sensor.dark_sky_daily_summary
    entity_current_conditions: sensor.dark_sky_icon  
    entity_humidity: sensor.dark_sky_humidity
    entity_pressure: sensor.dark_sky_pressure
    entity_temperature: sensor.dark_sky_temperature
    entity_visibility: sensor.dark_sky_visibility
    entity_wind_bearing: sensor.dark_sky_wind_bearing
    entity_wind_speed: sensor.dark_sky_wind_speed
    entity_forecast_high_temp_1: sensor.dark_sky_daytime_high_temperature_1
    entity_forecast_high_temp_2: sensor.dark_sky_daytime_high_temperature_2
    entity_forecast_high_temp_3: sensor.dark_sky_daytime_high_temperature_3
    entity_forecast_high_temp_4: sensor.dark_sky_daytime_high_temperature_4
    entity_forecast_high_temp_5: sensor.dark_sky_daytime_high_temperature_5
    entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature
    entity_forecast_low_temp_2: sensor.dark_sky_overnight_low_temperature_1
    entity_forecast_low_temp_3: sensor.dark_sky_overnight_low_temperature_2
    entity_forecast_low_temp_4: sensor.dark_sky_overnight_low_temperature_3
    entity_forecast_low_temp_5: sensor.dark_sky_overnight_low_temperature_4
    entity_forecast_icon_1: sensor.dark_sky_icon_1
    entity_forecast_icon_2: sensor.dark_sky_icon_2
    entity_forecast_icon_3: sensor.dark_sky_icon_3
    entity_forecast_icon_4: sensor.dark_sky_icon_4
    entity_forecast_icon_5: sensor.dark_sky_icon_5
    entity_background: Beach.jpg

If all of this is correct i must see the card over your background, or not?

Yes, try changing the order and use my card as the last card in your view.
And try running your config for the dark-sky-weather-card on a tab without the background card.
That way we will be able to tell if it is either an issue with the bg or the dark-sky-weather-card

Thatā€™s the only card i have in that view so itā€™s the lastā€¦
About the weather card i run it also in another view and as you see itā€™s working good:

24

I mean running my card as the last card in your view.
If this doesnā€™t work Iā€™ll do some troubleshooting tomorrow

  - icon: mdi:weather-cloudy
    id: meteo2
    title: Meteo2
    cards:
      - type: weather-forecast
        entity: weather.meteo_darksky
      - type: "custom:weatherbg-card"
        weather: weather.meteo_darksky

Ok, yes in that way the card is shown, but you must change the docs about your cardā€¦ It is not so clear when you posted the docsā€¦

So I better make my step 3 bold. :stuck_out_tongue:
Glad it works though. Have fun with it.

Yes, thanksā€¦ maybe put as example what you posted to meā€¦ more clearā€¦

1 Like

After updating to 0.81.1 the mp4 video is not anymore refreshing with the hourly and the weather conditionsā€¦
It stays always with the same backgroundā€¦

Can you link me the contents of your Javascript console after having the view containing the card open a bit?
Also does it change the video once you change the state via the states section of ha?

This is the screenshot of the console (if i understood right what you asked me)

What i must change in states section?

You can just try, if the card reacts to changes, by changing the weather entity to ā€œsunnyā€ or any other potential weather state.

Yes, it changes the video background, but then returns to the oldā€¦