THREE.js: Why VideoTexture is not playing?

Question

I want a very simple workable three.js VideoTexture example, video url starts with "http" is prefered (but basically all of the examples are not, why?), so i trid this one with codepen (modfied from the 1st three.js texture example found here : https://r105.threejsfundamentals.org/threejs/lessons/threejs-textures.html.

It is so simple that i just sit back and waited for watching the video after made the chagnes, but nothing happened, no error, no video, i just don't get it. Anybody please help, here is everything i used to play the videotexture:

html:

<canvas id="c"></canvas>
<script src="https://r105.threejsfundamentals.org/threejs/resources/threejs/r105/three.min.js"></script>
<video id="video" loop crossOrigin="anonymous" playsinline style="display:none">
    <source src="https://www.shadertoy.com/media/a/c3a071ecf273428bc72fc72b2dd972671de8da420a2d4f917b75d20e1c24b34c.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>

And js here:

// Three.js - Textured Cube
// from https://r105.threejsfundamentals.org/threejs/threejs-textured-cube.html

"use strict";

/* global THREE */

function main() 
{
    const canvas = document.querySelector("#c");
    const renderer = new THREE.WebGLRenderer({ canvas });

    const fov = 75; 
    const aspect = 2; // the canvas default
    const near = 0.1;
    const far = 5;
    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    camera.position.z = 2;

    const scene = new THREE.Scene();
    const geometry = new THREE.BoxGeometry(1, 1, 1);

    const cubes = []; // just an array we can use to rotate the cubes
    const loader = new THREE.TextureLoader();
    
    var material = null;

    if (false)
    {   
        material = new THREE.MeshBasicMaterial({ 
                map: loader.load("https://r105.threejsfundamentals.org/threejs/resources/images/wall.jpg")}
        );
    }
    
    else // video
    {
        let video = document.getElementById( 'video' );
        console.log(video);
        
        video.load();
        video.play();
        
        var videotex = new THREE.VideoTexture( video );        
        videotex.minFilter = THREE.LinearFilter;
        videotex.magFilter = THREE.LinearFilter;
        videotex.format = THREE.RGBFormat;
        
        material = new THREE.MeshBasicMaterial({ map: videotex } );        
    }   
    
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    cubes.push(cube); // add to our list of cubes to rotate

    function resizeRendererToDisplaySize(renderer) {
        const canvas = renderer.domElement;
        const width = canvas.clientWidth;
        const height = canvas.clientHeight;
        const needResize = canvas.width !== width || canvas.height !== height;
        if (needResize) {
            renderer.setSize(width, height, false);
        }
        return needResize;
    }

    function render(time) {
        time *= 0.001;

        if (resizeRendererToDisplaySize(renderer)) {
            const canvas = renderer.domElement;
            camera.aspect = canvas.clientWidth / canvas.clientHeight;
            camera.updateProjectionMatrix();
        }

        cubes.forEach((cube, ndx) => {
            const speed = 0.2 + ndx * 0.1;
            const rot = time * speed;
            cube.rotation.x = rot;
            cube.rotation.y = rot;
        });

        renderer.render(scene, camera);

        requestAnimationFrame(render);
    }

    requestAnimationFrame(render);
}

main();

here is the printed console log:

<video id="video" loop crossOrigin="anonymous" playsinline style="display:none">
    <source src="https://www.shadertoy.com/media/a/c3a071ecf273428bc72fc72b2dd972671de8da420a2d4f917b75d20e1c24b34c.ogv" type="video/ogg; codecs=&quot;theora, vorbis&quot;">

Edit:

Here are the facts i found so far:

1. videoTexture looks not working in codepen, proof: this code runs on local machine but not in codepen:

    video = document.createElement('video');                    

    video.crossOrigin = "anonymous";
    video.playsinline = "true";
    video.loop = 'true';

    let source = document.createElement('source');      
    source.src = "https://vjs.zencdn.net/v/oceans.mp4";                     
    source.type = 'video/mp4';                      
    video.appendChild(source);      

2. so far, above is the only video url starts with 'http' i can play on local machine (both video and audio are correctly loaded), video found here: https://codepen.io/Grooo/pen/dRXQPq (but he's not using VideoTexture)

3. maybe its something about crossorigin: videos start with 'http' can be played (because i can hear their sound (audio)) if i remove video.crossOrigin = "anonymous";.

any ideas?