There was a problem with the above. I want a dynamic video background for a website. It would change exactly what the weather is like outside, so if it rains, it will play a rainy video in the background, if the sun is shining it will be a sunny video and so on.
I already have a basic snippet of code that works, but I can only use images, not video.

```
<!DOCTYPE html>
<html>
<head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Dinamic Weather Background</title>
          <style>
          body[category="Clear"]
            {
              background-image: url('images/ClearSky.png');
              background-repeat: no-repeat;
              background-size: 1920px 1080px;
              background-color: lightblue;                 
            }

          body[category="Clouds"]
            {
              background-image: url('images/CloudSky.png');
              background-repeat: no-repeat;
              background-size: 1920px 1080px;
              background-color: silver;
            }

          body[category="Rain"]
            {
              background-image: url('images/RainSky.png');
              background-repeat: no-repeat;
              background-size: 1920px 1080px;
              background-color: dimgray;
            }

          body[category="Thunderstorm"]
            {
              background-image: url('images/ThunderstormSky.png');
              background-repeat: no-repeat;
              background-size: 1920px 1080px;
              background-color: lightblue;                 
            }

          body[category="Drizzle"]
            {
              background-image: url('images/DrizzleSky.png');
              background-repeat: no-repeat;
              background-size: 1920px 1080px;
              background-color: lightblue;                 
            }

          body[category="Snow"]
            {
              background-image: url('images/SnowSky.png');
              background-repeat: no-repeat;
              background-size: 1920px 1080px;
              background-color: lightblue;                 
            }

          body[category="Clear"] .category
            {
              color: rgba(255, 255, 255, 0);
            }
          body[category="Clouds"] .category
            {
              color: rgba(255, 255, 255, 0);
            }
          body[category="Rain"] .category
            {
              color: rgba(255, 255, 255, 0);
            }
          body[category="Thunderstorm"] .category
            {
              color: rgba(255, 255, 255, 0);
            }
          body[category="Drizzle"] .category
            {
              color: rgba(255, 255, 255, 0);
            }
          body[category="Snow"] .category
            {
              color: rgba(255, 255, 255, 0);
            }
          .name1
          {
            color: rgba(255, 255, 255, 0);
          }
          .desc
          {
            color: rgba(255, 255, 255, 0);
          }
          .temp
          {
            color: rgba(255, 255, 255, 0);
          }
          </style>
</head>
<body>
            <div>
              <div class="name1"></div>
              <div class="desc"></div>
              <div class="temp"></div>
              <div class="category">
            </div>

            <script language="JavaScript">
                var button = document.querySelector('.button')
                var name1 = document.querySelector('.name1');
                var desc = document.querySelector('.desc');
                var temp = document.querySelector('.temp'); 
                var category = document.querySelector('.category'); 

                fetch('https://api.openweathermap.org/data/2.5/weather?q=T%C3%B6r%C3%B6kszentmikl%C3%B3s&appid=fa7e76863d7bd04e06e348ab8e1973de')
                .then(response => response.json()) 
                .then(data => {
                      var nameValue = data['name'];
                      var categoryValue =data['weather'][0]['main'];
                      var tempValue = data['main']['temp'];
                      var descValue = data['weather'][0]['description'];
                      var tofloat = Math.abs(tempValue - 273.15);
                      var tempCelcius= parseFloat(tofloat).toFixed(2);

                          name1.innerHTML = nameValue;
                          category.innerHTML = categoryValue;
                          temp.innerHTML = tempCelcius;
                          desc.innerHTML = descValue;

                document.body.setAttribute("category", categoryValue);
                              })
                .catch(err => alert("Wrong City Name!"))

            </script>
</body>
</html>

```

Anyone have any idea how I could solve this? Thanks for the answers!