Threejs responsiveness for 2D videos

Question

I would like to play an interactive 2D video in three.js. I would like to keep the video aspect ratio when resizing the browser window.

My current code

 var camera, scene, renderer; var texture_placeholder, distance = 500; init(); render(); function init() { var container, mesh; container = document.getElementById('container'); camera = new THREE.PerspectiveCamera(90, 1, 0.1, 50000); camera.target = new THREE.Vector3(0, 0, 0); scene = new THREE.Scene(); var videoRatio = 16 / 9; var geometry = new THREE.PlaneBufferGeometry(1.7, 1); var video = document.createElement('video'); video.width = 960; video.height = 540; video.autoplay = true; video.loop = true; video.mute = true; video.setAttribute('crossorigin', 'anonymous'); video.src = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" var texture = new THREE.VideoTexture(video); texture.minFilter = THREE.LinearFilter; texture.format = THREE.RGBFormat; var material = new THREE.MeshBasicMaterial({ map: texture }); video.onplay = function() { onWindowResize(); } mesh = new THREE.Mesh(geometry, material); scene.add(mesh); renderer = new THREE.WebGLRenderer({ depth: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); container.appendChild(renderer.domElement); window.addEventListener('resize', onWindowResize, false); var playBtn = document.getElementById("play_btn").onclick = function() { console.log("[DEBUG] play button clicked"); video.play(); renderer.setSize(window.innerWidth, window.innerHeight); } } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); console.log("[DEBUG] onWindowResize"); } function render() { requestAnimationFrame(render); update(); } function update() { camera.updateProjectionMatrix(); camera.position.z = 0.5; renderer.setSize(window.innerWidth, window.innerHeight); renderer.render(scene, camera); }

 <script src="//cdnjs.cloudflare.com/ajax/libs/three.js/109/three.js"></script> <button id="play_btn">play</button> <div id="container"></div>

Codepen demo: https://codepen.io/mr1985/pen/OJVOKgY

Currently, I am using an iframe to overcome the issue, but I would prefer to handle the video aspect ratio with three.js. For reference here is my iframe :

<style>
  .iframe-container {
    overflow: hidden;
    padding-top: 56.25%;
    position: relative;
  }

  .iframe-container iframe {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

</style>
<div class="iframe-container">
  <iframe width="960" height="540" src="http://localhost:8000/mini_player.html" frameborder="0" allowfullscreen scrolling="no"</iframe>
</div>

Any help would be highly appreciated.

Answer 1

Removing the following lines solved the issue on Desktop browser :

video.width = 960;
video.height = 540;

On mobile I still have a wrong ratio. I added the following to not play the video in fullscreen :

video.setAttribute( 'playsinline' , '' );.