HTML5 - Insert Video hosted by Vimeo or YouTube

You will need to have an explicit player configured to accommodate your video since your video is from a website that doesn't let you access to actual video files

...it is possible using a php function which can extract your html5 <video> source.
Then you can play that source on <video>.

Here is some code which extract the video source for the <video> element and then project this video element (hidden in by css display: none) into a <canvas> element. So you can play the Youtube video on canvas (some basic video controls for <canvas> added).

Save the following code on a PHP file then test on your server.

<?php
$vid = 'fCabZdoD0OI'; //your Youtube video ID like ... 'dgKSqz3it50';

parse_str(file_get_contents("https://youtube.com/get_video_info?video_id=" . $vid), $info);

$playabilityJson = json_decode($info['player_response']);

$title = '&title=' . $playabilityJson->videoDetails->title;

$formats = $playabilityJson->streamingData->formats;

$IsPlayable = $playabilityJson->playabilityStatus->status;

if (strtolower($IsPlayable) != 'ok')
{
  $log = date("c") . " " . $info['player_response'] . "\n";
  file_put_contents('./video.log', $log, FILE_APPEND);
}

$result = array();

//$theLink = '';

if (!empty($info) && $info['status'] == 'ok' && strtolower($IsPlayable) == 'ok')
{
  $i = 0;

  foreach ($formats as $stream)
  {
    $streamUrl = $stream->url;
    $type = explode(";", $stream->mimeType);
    $qualityLabel = '';

    if (!empty($stream->qualityLabel))
    {
      $qualityLabel = $stream->qualityLabel;
    }

    $videoOptionsOrg[$i]['link'] = $streamUrl;
    $videoOptionsOrg[$i]['type'] = $type[0];
    $videoOptionsOrg[$i]['quality'] = $qualityLabel;

    if ($videoOptionsOrg[$i]['quality']  == 360) // you can search for 720 or 1080 ...
    {
      $type = '&' . $videoOptionsOrg[$i]['type'];
      $theLink = urldecode($videoOptionsOrg[$i]['link'] . $title . $type);
    }
    $i++;
  }

  $result['videos'] = array(
    'info' => $info,
    'formats' => $videoOptionsOrg
  );

  //print_r($result);
  //echo $theLink;
}
?>

<video id="video" controls width="600" height="340" style="display: none;" data-info="you can change display: none to display: block;">
  <source src="<?= $theLink ?>">
</video>
<h3>Clicking on Canvas you can play stop the video.<br>
  Clicking / Dragging over progress bar HTML5 element you can set the video Current Time</h3>
<canvas id="canva" width="600" height="340"></canvas>
<progress id="progress" style="display: block; border: none; height: 34px;" value="0" max=""> 0% </progress>
<p id="info">INFO</p>

<script>
  var video = document.getElementById('video');
  var canvas = document.getElementById('canva');
  var ctx = canvas.getContext('2d');
  var info = document.getElementById('info');
  var progress = document.getElementById('progress');

  progress.style.width = canvas.clientWidth + 'px';

  var playstate = 'pause';
  var W, H, T, D, P, newtime, max, pos, oldplaystate;

  (function() {

    video.onloadedmetadata = function() {
      D = video.duration;
      max = progress.clientWidth;
      progress.setAttribute("max", D);
    }

    video.addEventListener('play', function() {
      var $this = this;
      progress.setAttribute("max", D);

      (function loop() {
        if (!$this.paused && !$this.ended) {
          T = video.currentTime;
          test();
          info.innerHTML = 'duration : ' + D + ' || current T : ' + T;
          progress.setAttribute("value", T);
          window.requestAnimationFrame(loop);
        }
      })();
    });

    video.addEventListener('canplay', function() {
      test();
    });

    canvas.addEventListener('mouseup', function() {
      cvPlay();
    });

  })();

  function test() {
    ctx.drawImage(video, 0, 0);
  }

  progress.onmouseup = function() {

    info.innerHTML = newtime;
    progress.setAttribute("value", newtime);
    video.currentTime = newtime;

    if (oldplaystate === 'play') {
      playstate = 'play';
      video.play();
      oldplaystate = playstate;
    } else {
      playstate = 'pause';
      oldplaystate = playstate;
      video.pause();
    }
    this.onmousemove = function() {}
  }

  progress.addEventListener('mousedown', function(e) {

    if (playstate === 'play') {
      oldplaystate = 'play';
    }

    playstate = 'pause';
    video.pause();

    if (newtime > D) {
      newtime = D;
    }

    calc(e);

    this.onmousemove = function(e) {
      calc(e);
    }

    info.innerHTML = newtime + 'draginnn...';

  }, true);

  function cvPlay() {
    if (playstate == 'pause' || playstate == '') {
      oldplaystate = playstate = 'play';
      video.play();
    } else {
      oldplaystate = playstate = 'pause';
      video.pause();
    }
    console.log(oldplaystate + ' - ' + playstate);
  }

  function calc(evt) {
    pos = evt.pageX - (progress.offsetLeft);
    newtime = pos / max * D;
    progress.value = newtime;
  }
</script>