I'm trying to play a Youtube video using videojs and videojs-youtube. I've installed the latest versions with npm (videojs 7.18.1, videoojs-youtube 2.6.1). I'm loading in this order:

<script type="text/javascript" src="/node_modules/video.js/dist/video.js"></script>
<script type="module" src="/node_modules/videojs-youtube/dist/Youtube.js"></script>

When the page loads, I get the error: "Cannot read properties of undefined (reading 'videojs')" when it hits line 32:

root.Youtube = factory(root.videojs);

If I try to play the video, I get the following errors:

VIDEOJS: ERROR: The "youtube" tech is undefined. Skipped browser support check for that tech.
VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media.

I'm creating the player in JavaScript with:

videojs(video.id).ready(function () {
myPlayer = this;
myPlayer.width = width;
myPlayer.height = height;
myPlayer.addClass("video-js");
myPlayer.addClass("vjs-default-skin");
myPlayer.autoplay(true);
myPlayer.controls(true);
myPlayer.options_.techOrder[1] = "youtube";
myPlayer.preload("auto");
myPlayer.on("play", moviePlay);
myPlayer.on('ended', movieEnded);
myPlayer.on('failed', movieFailed);
myPlayer.on('seeking', movieSeeking);
});

I'm selecting from a number of videos, so I them with:

myPlayer.src( { type: "video/youtube", src: "https://www.youtube.com/watch?v=HlXexv4Uc1E?1651837154234" } );

Youtube does show up in the techOrder. I wasn't sure how to do that in JavaScript but it seems to be one of two in the array. The page itself is in a frame of a frameset if that makes any difference. I've changed the videojs-youtube JavaScript example into an .asp frameset and used the same type of include files and it works fine. Could I have variable or function names that conflict... something like that?

What have I done wrong and how to I fix the original error which I assume causes the other two errors on play?