I need some help to make the Videojs video player buttons navigable with the javascript Spatial Navigation plugin

Question

I'm creating a website that can be navigable from the keyboard. I use the great Spatial navigation here: https://github.com/luke-chang/js-spatial-navigation

Everything work well with my keyboard navigation with this navigation plugin but after hours and days i still can't navigate these Video js buttons and i don't understand why.

I did a little example here one Codepen and it still not working. https://codepen.io/onigetoc/pen/MWBowmg

I use the videojs seek to add forward and rewind buttons. I will also use the videojs hotkeys plugin but for now, i try to make my player navigable with the arrow keyboard.

I absolutely want to use the Spatial Navigation plugin. (It's not a Videojs plugin at all).

var SN = SpatialNavigation;
SN.init();

// SN.set({
//   straightOnly: true
// });

SN.add("playerview", {
  selector: "#content_video"
  //        defaultElement: '#vplayer',
  //        defaultElement: '#mediaOptionsContainer .item:first-child',
  //        defaultElement: '#media-options-container .item:first-child',
  //        enterTo: '#media-options-container .item:first-child',
  //        straightOnly: false,
  //          rememberSource: true,
  //enterTo: 'last-focused'
});

SN.add("playcontrols", {
  //    selector: '.vjs-control-bar .vjs-control',
  //  selector: '.vjs-control-bar button',
  //  selector: ".video-js button",
  selector: ".vjs-control-bar .vjs-button",
  defaultElement: ".vjs-play-control"
  //        defaultElement: '.vjs-play-control',
  //        enterTo: 'button',
  //        straightOnly: true,
  //        leaveFor: {
  //            right: '',
  //            up: '',
  //            down: '@playerview',
  //            left: ''
  //        }
});

SN.makeFocusable();

var player = videojs("content_video", {
        plugins: {
//          hotkeys: {
//              volumeStep: 0.1,
//              seekStep: 30,
//              enableModifiersForNumbers: false
//          },
            seekButtons: {
       backIndex: 0,
       forward: 30,
       back: 10
     },
        },
});


player.on("ready", function () {
  player.vhs = null;

  setTimeout(() => {
    
    /*** ADD TABINDEX TO BUTTONS IF NEEDED ***/
    // $('.vjs-control .vjs-button').attr('tabindex', '-1');
    //  $("#player-view").find(".vjs-button").attr("tabindex", "-1");
    // $("#content_video").find(".vjs-button").attr("tabindex", "-1");

    SN.makeFocusable();
    // SN.focus('playerview'); // FOR OTHER PURPOSE I NEED THIS
    SN.focus("playcontrols"); // FOCUS ON THE PLAY BUTTON AT READY
  }, 700);
});