CSS3D Youtube

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/renderers/CSS3DRenderer.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<button id="play">Play</button>
<div id="css"></div>
<div id="webgl"></div>

CSS

body {
  margin: 0;
  overflow: hidden;
}

#css,
#webgl {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#play {
  z-index: 100000;
  height: 60px;
  width: 100px;
  margin: -30px -50px;
  position: absolute;
  top: 50%;
  left: 50%;
  display: none;
}

JavaScript

var player;
 var camera, webglscene, webglrenderer;
 var controls;
 var geometry, material, mesh;

 var cssscene, cssrenderer;

 init();
 animate();

 function loadYouTubeApi() {

   console.log("loading api");


   var tag = document.createElement('script');
   tag.src = "https://www.youtube.com/iframe_api";
   var firstScriptTag = document.getElementsByTagName('script')[0];
   firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


 }

 function createYoutubeVideo() {


   cssscene = new THREE.Scene();
   cssrenderer = new THREE.CSS3DRenderer();
   cssrenderer.setSize(window.innerWidth, window.innerHeight);
   document.querySelector('#css').appendChild(cssrenderer.domElement);

   var videodiv = document.createElement('div');
   videodiv.style.width = '480px';
   videodiv.style.height = '360px';
   videodiv.style.backgroundColor = 'pink';
   videodiv.setAttribute("id", "videoframe");

   var cssobject = new THREE.CSS3DObject(videodiv);
   cssobject.position.set(0, 0, -2);
   cssobject.rotation.y = 0;
   cssobject.scale.set(0.01, 0.01, 0.01);

   cssscene.add(cssobject);

   var occlusionMaterial = new THREE.MeshPhongMaterial({
     opacity: 0.0,
     color: new THREE.Color('black'),
     blending: THREE.NoBlending,
     side: THREE.DoubleSide,
   });

   var webglrepresentation = new THREE.Mesh(new THREE.PlaneGeometry(480, 360), occlusionMaterial);
   webglrepresentation.position.copy(cssobject.position);
   webglrepresentation.rotation.copy(cssobject.rotation);
   webglrepresentation.scale.copy(cssobject.scale);
   scene.add(webglrepresentation);



 }

 function init() {
   camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 100);
   camera.position.z = 10;

   scene = new THREE.Scene();

   renderer = new THREE.WebGLRenderer({
     alpha: true,
     antialias: true
   });
   renderer.setClearColor(0x000000, 0);
   renderer.setSize(window.innerWidth, window.innerHeight);
  ...