video++

index.html

@@ -31,6 +31,7 @@
                 <button onclick="myFunction2()">Colophon</button>
                 <button onclick="myFunction4()">License</button>
                 <button onclick="myFunction3()">Print</button>
+                <button onclick="myFunction5()">Archive</button>
             </div>
                 
 <div id='innest'>
@@ -139,7 +140,15 @@
     
     </div>
                 
-<p id='gallery'></p>
+<div id='gallery'>
+
+</div>
+
+
+    <video id="archive" controls>Your browser does not support the &lt;video&gt; tag.
+        <source src="https://media.xpub.nl/special_issue_13-web.mp4"/>
+      </video>
+
     
 </div>
                 
@@ -156,6 +165,8 @@
           document.getElementById("print").style.visibility = "hidden";
             document.getElementById("gallery").style.visibility = "hidden";
             document.getElementById("license").style.visibility = "hidden";
+            document.getElementById("archive").style.visibility = "hidden";
+
             }
         
         function myFunction2() {
@@ -164,6 +175,8 @@
           document.getElementById("print").style.visibility = "hidden";
             document.getElementById("gallery").style.visibility = "hidden";
             document.getElementById("license").style.visibility = "hidden";
+            document.getElementById("archive").style.visibility = "hidden";
+
             }
         
                 function myFunction3() {
@@ -172,6 +185,8 @@
           document.getElementById("print").style.visibility = "visible";
         document.getElementById("gallery").style.visibility = "hidden";
         document.getElementById("license").style.visibility = "hidden";
+        document.getElementById("archive").style.visibility = "hidden";
+
             }
         
                 function myFunction4() {
@@ -180,6 +195,19 @@
           document.getElementById("print").style.visibility = "hidden";
                     document.getElementById("gallery").style.visibility = "hidden";
                     document.getElementById("license").style.visibility = "visible";
+                    document.getElementById("archive").style.visibility = "hidden";
+
+            }
+
+            function myFunction5() {
+          document.getElementById("intro").style.visibility = "hidden";
+          document.getElementById("colophon").style.visibility = "hidden";
+          document.getElementById("print").style.visibility = "hidden";
+            document.getElementById("gallery").style.visibility = "hidden";
+                    document.getElementById("license").style.visibility = "hidden";
+                    document.getElementById("archive").style.visibility = "visible";
+                // alert('cose')
+
             }
         
             gallery = document.getElementById("gallery");

js.js

@@ -238,3 +238,9 @@ Without <a target="_blank" class="${icons[TS[5]]}" href="${links[TS[5]]}">${TS[5
 This is why we have to <a target="_blank" class="${icons[VB[2]]}" href="${links[VB[2]]}">${VB[2]} <span class="${icons[VB[2]]}">${icons[VB[2]]}</span></a> for the <a target="_blank" class="${icons[TS[7]]}" href="${links[TS[7]]}">${TS[7]} <span class="${icons[TS[7]]}">${icons[TS[7]]}</span></a> in ever-changing <a  target="_blank" class="${icons[NN[0]]}" href="${links[NN[0]]}">${NN[0]} <span class="${icons[NN[0]]}">${icons[NN[0]]}</span></a>.`
 
 document.querySelector('#showMessage').innerHTML = message
+
+
+
+
+
+

style.css

@@ -83,7 +83,7 @@ button{
     display: fixed;
     margin: 0 1vw;
    margin-bottom: 2vw;
-     min-width: 6vw; 
+     min-width: 3vw; 
 }
     
 button:hover{
@@ -182,6 +182,7 @@ button:focus{
     overflow-y: hidden;
     line-height: 1.5vw;}
 
+    
  #colophon{
     visibility: hidden;
     position: absolute; 
@@ -194,6 +195,22 @@ button:focus{
     margin-top: 2vw;
 } 
 
+
+#archive{
+    width: 35vw;
+    visibility: hidden; 
+    position: relative; 
+    top: -25vw;
+    /* margin: 90% 0; */
+    overflow-y: hidden;}
+
+#archive video{
+    width: 100%;
+    margin: 40% 0;
+    /* position: absolute; */
+    top: 0;
+}
+    
 #innest{
     position: relative;
     overflow-y: scroll;
@@ -525,4 +542,11 @@ button:focus{
      min-width: 20%; 
 }
 
+#archive{
+    width: 100%;
+    position: relative;
+    top: -68vw;
+}
+    }
+
 }