live web – self-portrait

result of the web self-portrait

This week I created a prototype for a web based interactive self-portrait. The web page shows a video-performance that I made in 2014 autoplaying muted. The video can be paused or played through the “Breath/Dance” button on the bottom left of the page. I also added some text describing things that I love and as a title the fact that was most present in my mind during the period that I was designing the website: the uncontrolled fires in the Amazon Rainforest and Pantanal in Brazil and it’s connection and disparities to the fires in California.

The code was based on this example by w3schools and can be found below.

<!DOCTYPE html>

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: Arial;
      font-size: 17px;
    }

    #myVideo {
      position: fixed;
      right: 0;
      bottom: 0;
      min-width: 100%;
      min-height: 100%;
    }

    .content {
      position: fixed;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      color: #dc1616;
      width: 100%;
      padding: 20px;
    }

    #myBtn {
      width: 200px;
      font-size: 18px;
      padding: 10px;
      border: none;
      background: #000;
      color: rgb(255, 0, 0);
      cursor: pointer;
    }

    #myBtn:hover {
      background: #ddd;
      color: black;
    }
  </style>
</head>

<body>

  <video autoplay muted loop id="myVideo">
    <source src="loginvideo.mp4" type="video/mp4">
  </video>

  <div class="content">
    <h1>the forest is on fire</h1>
    <p>I love cold waterfalls. I love swiming. I love a queer dancefloor. I love living close to a park. I love biking
      while listening to music. I love the silence even though it doesn't exist. I love invisible machines. I love walking with my feet on the ground. I love the Fall. I love dancing. Sometimes I forget. Sometimes I make poetry. The fire won't burn the memories. </p>
    <button id="myBtn" onclick="myFunction()">Breath</button>
  </div>

  <script>
    var video = document.getElementById("myVideo");
    var btn = document.getElementById("myBtn");

    function myFunction() {
      if (video.paused) {
        video.play();
        btn.innerHTML = "Breath";
      } else {
        video.pause();
        btn.innerHTML = "Dance";
      }
    }

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: