JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="viewport-left">
  <div class="monitor">
    <div class="monitor-screen">
      <canvas id="monitorcanvas-left" width="200" height="120"></canvas>
      <video id="monitorvideo" controls width="180" height="100">
        <source src="http://html5doctor.com/demos/video-canvas-magic/video.mp4" type="video/mp4">
      </video>
    </div>
    <div class="monitor-back"></div>
    <div class="monitor-front"></div>
    <div class="monitor-top"></div>
    <div class="monitor-bottom"></div>
    <div class="monitor-left"></div>
    <div class="monitor-right"></div>
    <div class="monitor-buttons">
      <button class="b1"></button><button class="b2"></button><button class="b3"></button>
    </div>
  </div>
</div>
<div class="viewport-right">
  <div class="monitor">
    <div class="monitor-screen">
      <canvas id="monitorcanvas-right" width="200" height="120"></canvas>
    </div>
    <div class="monitor-back"></div>
    <div class="monitor-front"></div>
    <div class="monitor-top"></div>
    <div class="monitor-bottom"></div>
    <div class="monitor-left"></div>
    <div class="monitor-right"></div>
    <div class="monitor-buttons">
      <button class="b1"></button><button class="b2"></button><button class="b3"></button>
    </div>
  </div>
</div>

CSS

html{
  height:100%;
}
body{
  height:100%;
  margin:0px;
  perspective:500px;
}
.viewport-left{
  position:fixed;
  top:0px;
  bottom:0px;
  left:0px;
  width:50%;
  overflow:hidden;
  perspective:500px;
  perspective-origin:48% 50%;
}
.viewport-right{
  position:fixed;
  top:0px;
  bottom:0px;
  right:0px;
  width:50%;
  overflow:hidden;
  perspective:500px;
  perspective-origin:52% 50%;
}
.monitor{
  transform-origin: 50% 100%;
  transform-style:preserve-3d;
  position:absolute;
  left:50%;
  top:50%;
  height:0px;
  width:0px;
  animation:spin infinite 10s linear;
}
@keyframes spin{
  0% { transform:rotateY(0deg) rotateX(30deg) translateZ(100px); }
  100% { transform:rotateY(360deg) rotateX(30deg) translateZ(100px); }
}
.monitor>div{
  position:absolute;
  background-color:#333;
  backface-visibility:hidden;
}
.monitor .monitor-front{
  width:200px;
  height:120px;
  margin-left:-100px;
  margin-top:-60px;
  transform:translateZ(5px);
}
.monitor .monitor-screen{
  width:180px;
  height:100px;
  margin-left:-90px;
  margin-top:-50px;
  transform:translateZ(7px);
  background-color:#000;
}
.monitor canvas{
  position:absolute;
  width:180px;
  height:100px;
}
.monitor video{
  position:absolute;
  width:180px;
  height:100px;
  display:none;
}
.monitor .monitor-buttons{
  width:160px;
  height:20px;
  margin-left:-80px;
  margin-top:41px;
  transform:translateZ(6px);
  background-color:transparent;
}
.monitor .monitor-buttons button{
  font-size:4px;
  padding:3px;
  line-height:4px;
  height:4px;
  width:4px;
  border:none;
  background-color:rgba(255,255,255,0.3);
  color:#fff;
  margin-right:2px;
}
.monitor.on .monitor-buttons button.b1{
  background-color:rgba(255,0,0,0.7);
}
.monitor .monitor-back{
  width:200px;
  height:120px;
  margin-left:-100px;
  margin-top:-60px;
  transform:translateZ(-5px) rotateY(-180deg);
  background-color:#111;
}
.monitor .monitor-left{
  width:10px;
  height:120px;
  margin-left:-5px;
  margin-top:-60px;
 ...

JavaScript

var monitor = {
	
  broadcast: function(autoplay){
      
      monitor.v = document.getElementById('monitorvideo');
      monitor.canvas_left = document.getElementById('monitorcanvas-left');
      monitor.context_left = monitor.canvas_left.getContext('2d');
      monitor.canvas_right = document.getElementById('monitorcanvas-right');
      monitor.context_right = monitor.canvas_right.getContext('2d');

      monitor.v.addEventListener('play', function(){
          monitor.draw(this,monitor.context_left,180,80);
          monitor.draw(this,monitor.context_right,180,80);
      },false);
			
      if(autoplay){
      
      	monitor.v.play();
      
      }
      
  },
  draw: function(v,c,w,h) {
      if(monitor.v.paused || monitor.v.ended) return false;
      c.drawImage(v,10,10,w,h);
      setTimeout(monitor.draw,20,v,c,w,h);
  },
  init: function(){
  
  	monitor.broadcast(true);
  
  },
  pause: function(){
  
  	monitor.v.pause();
  
  },
  play: function(){
  
  	monitor.v.play();
  
  },
  rewind: function(){
  	
    monitor.v.currentTime = 0;
  	monitor.v.play();
  
  },
  volume: function(volume){
  	
    monitor.v.volume = volume;
  	
  }

}

monitor.init();