VIDEOJS: ERROR: The "youtube" tech is undefined. Skipped browser support check for that tech

[akshaykatale99]

VIDEOJS: ERROR: The "youtube" tech is undefined. Skipped browser support check for that tech in angular 7

"video.js": "^7.8.4", "videojs-youtube": "^2.0.8",

[OtavioBraga0]

I updated my versions to:

"video.js": "^7.10.2", "videojs-youtube": "^2.6.1",

And it worked for me

[rodrigo-arias]

I tried version 2.6.1 with no luck, but I fixed it by importing video.es.js instead of video.min.js in my webpack configuration:

'./node_modules/video.js/dist/video.es.js',
'./node_modules/videojs-youtube/dist/Youtube.min.js',

I hope this helps

[satishbluone]

I am also facing same error and I am using following versions with angular 10 "video.js": "^7.11.4" "videojs-youtube": "^2.6.1",

Can you please show me any example to play the youtube video in angular 10?

[Famondir]

Hi I tried it with "video.js": "^7.18.0" "videojs-youtube": "^2.6.1" and had no luck. My codepen throws the error mentioned in the thread title: https://codepen.io/Famondir/pen/rNYvrYz

On a Moodle page (where I want to use this) I get the error:

Youtube.min.js:1 
        
       Uncaught TypeError: Cannot read properties of undefined (reading 'browser')
    at Youtube.min.js:1:392
    at Youtube.min.js:1:307
    at Youtube.min.js:1:331

I import the scripts via cdn.

Can anyone help me out?

I found the solution in another issue: https://github.com/videojs/videojs-youtube/issues/457#issuecomment-420143536

I had to load video.js before Youtube.js! So logically!

[ItamarSilverstein]

Any news regarding this error ? I get this same error ("the youtube" tech is undefined) on: "video.js": "^7.18.1", "videojs-youtube": "^2.6.1"

how do you recommend on loading the libraries together ? via

[gkatsev]

how do you recommend on loading the libraries together ?

you can load it either via <script> or via import/require. In either case, you'd want to include video.js first and then the youtube tech. You'd also want to make sure that the youtube tech script has loaded before you initialize the player.

The simple example should generally work, and works every time locally because both scripts load quickly, but there's a danger that video.js will try initializing the player automatically before the youtube tech is available, so, might be worth initializing it manually instead of using data-setup.

[ItamarSilverstein]

@gkatsev Thanks!

it worked as you said, manually by:
        1. load videojs library
        2. load YoutubeVideoJS library
        3.
        this.videoJsPlayer = videojs(this.videojsId, {
            techOrder: ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}]
        });

note: simple import videojs and after that import youtube videojs didn't work for me, only lazy loading the videojs youtube after making sure videojs got loaded. are there any limitations that one will have using this plugin and not have in youtube embed ?

[gkatsev]

Hm... if you're using a bundler, I'd expect import to work. Though, the youtube tech is set up as a UMD module and video.js is set up as a hybrid package, so, it's possible at this point the youtube tech ends up loading a different version of video.js than your import.

This tech runs the standard youtube embed, so, no extra limitations beyond the ones imposed by youtube.

[hungtd97]

@gkatsev I'm using bundler with Webpack but import doesn't work. videojs-youtube uses a different instance of video.js as you said. Do you have any advice?

[gkatsev]

I'd expect it to work if you're using Video.js 7 (it doesn't really work with v8 right now).

If you can set up a minimal test example on codesandbox.io, I can take a look.

[hungtd97]

@gkatsev yeah, I downgrade to version 7 and it works great. Many thanks to you.