Update multi-tab.html

should be finished and working enough to use YouTube video IDs
TangentFoxy · Jul 6, 2016 · 7633d19 · 7633d19
1 parent 47b1984
commit 7633d19
Showing 1 changed file with 11 additions and 4 deletions.
diff --git a/experiments/multi-tab.html b/experiments/multi-tab.html
@@ -14,13 +14,20 @@
       position: absolute;
       bottom: 0;
       right: 0;
+      z-index: 13;
     }
   </style>
+  <script>
+    function set(id) {
+      var input = document.getElementById("t" + id).elements[0].value;
+      document.getElementById("f" + id).src = "http://www.youtube.com/embed/" + input;
+    }
+  </script>
 </head>
 <body>
-  <div><iframe src="http://www.youtube.com/embed/K722TGxgm6Q"></iframe><span>Some text</span></div>
-  <div><iframe src="http://www.youtube.com/embed/K722TGxgm6Q"></iframe><span>Some text</span></div>
-  <div><iframe src="http://www.youtube.com/embed/K722TGxgm6Q"></iframe><span>Some text</span></div>
-  <div><iframe src="http://www.youtube.com/embed/K722TGxgm6Q"></iframe><span>Some text</span></div>
+  <div><iframe id="f1" src="http://www.youtube.com/embed/K722TGxgm6Q"></iframe><span><form id="t1"><input type="text"><button onclick="set(1)">S</button></form></span></div>
+  <div><iframe id="f2" src="http://www.youtube.com/embed/K722TGxgm6Q"></iframe><span><form id="t2"><input type="text"><button onclick="set(2)">S</button></form></span></div>
+  <div><iframe id="f3" src="http://www.youtube.com/embed/K722TGxgm6Q"></iframe><span><form id="t3"><input type="text"><button onclick="set(3)">S</button></form></span></div>
+  <div><iframe id="f4" src="http://www.youtube.com/embed/K722TGxgm6Q"></iframe><span><form id="t4"><input type="text"><button onclick="set(4)">S</button></form></span></div>
 </body>
 </html>