All modals for youtube displaying "This video is unavailable."

[dtotheram]

Even on the demo site the modals don't seem to be working.

[obj63mc]

Troubleshooting this on a site, it appears that if you have the playlist variables in the embed url but are not loading a playlist it will error out. So the defaults simply need to remove playlist, list and listType variables and then it will load. Basically according to this - https://developers.google.com/youtube/player_parameters?hl=en you should either be providing a video id or playlist information not both. There was also some deprecations late last year in terms of playlists and assuming that their final updates were pushed today.

[obj63mc]

To give an example - the URL that is generated for the embed is -

https://www.youtube.com/embed/L61p2uyiMSo?autoplay=1&cc_load_policy=1&color=null&controls=1&disablekb=0&enablejsapi=0&end=null&fs=1&h1=null&iv_load_policy=1&list=null&listType=null&loop=0&modestbranding=null&mute=0&origin=null&playlist=null&playsinline=null&rel=0&showinfo=1&start=0&wmode=transparent&theme=dark&nocookie=false

which won't work but the following link will simply removing &list=null and &playlist=null

https://www.youtube.com/embed/L61p2uyiMSo?autoplay=1&cc_load_policy=1&color=null&controls=1&disablekb=0&enablejsapi=0&end=null&fs=1&h1=null&iv_load_policy=1&listType=null&loop=0&modestbranding=null&mute=0&origin=null&playsinline=null&rel=0&showinfo=1&start=0&wmode=transparent&theme=dark&nocookie=false

[eytanchen]

Thanks a lot!! You've just saved me hours of investigating.

[dtotheram]

Thanks so much, @obj63mc! I was wondering why the modals often show a playlist option in the embed but it was empty when I clicked it.

[OwenMelbz]

Anybody have any ideas when this is likely to be merged and released?

Thanks :)

[zietbukuel]

I'm having the exact same issue. I've tried to download the v2.4.4 tag but it doesn't seem to work. The js/ folder only contains files from v2.4.3, not the updated ones. I've also tried to build this myself, but I'm getting this error:

error An unexpected error occurred: "https://registry.yarnpkg.com/electron/-/electron-1.8.0.tgz: Request failed \"404 Not Found\""

And I can't continue anymore.

[thomasfrobieter]

https://github.com/appleple/modal-video/pull/74 Fixed this issue for me.

@zietbukuel The built JS & CSS files are also included in the repo, so just use this files (https://github.com/appleple/modal-video/archive/refs/heads/master.zip) till the next release?

[OwenMelbz]

@zietbukuel Any suggestions for the easiest way for users to do this if they're using a package manager such as yarn/npm etc and not just downloading files directly?

[zietbukuel]

@thomasfrobieter thank you, now I see master contains v2.4.4

[ABooooo]

Thank you, it works!

[b7-afonso]

The error on the video still exists on the Demo page https://appleple.github.io/modal-video/

[mkasumi]

@b7-afonso Thanks! :) Now fixed demo page! https://appleple.github.io/modal-video/

[eldorokhova]

I'm having the same issue, except my video url doesn't have any playlists in url, the generated link simply has the video id, but the video is unavailable. Any suggestions?

[CaelanStewart]

Issue for me too. Any idea when this will be released?

This is basically a non-working library presenting itself as if it were suitable for production use, when that is not the case.

[CaelanStewart]

Got some time to look at this more, and I think I've found the issue, which fixes my case and doesn't seem to cause any issues...

I think there's a couple of things... 'null' is not a valid value to pass to YouTube, and when the query string built in src/core/index.js:ModalVideo.prototype.getQueryString, the default values are added to the query string, even if those default values contain null.

And because this library specifies playlist=null&list=null&listType=null as the default options, just trying to load a simple video fails because 'null' is not a list or playlist that exists et cetera.

So the simplest thing is to not add options with null or undefined values to the query string.

I downloaded master and imported directly into the build system, but with the following change:

src/core/index.js:78

Change:

getQueryString(obj) {
  let url = '';
  Object.keys(obj)
    .forEach((key) => {
      url += `${key}=${obj[key]}&`;
    });
  return url.substr(0, url.length - 1);
}

getQueryString(obj) {
  let url = '';
  Object.keys(obj)
    .forEach((key) => {
      if (obj[key] !== null && obj[key] !== undefined) {
        url += `${key}=${obj[key]}&`;
      }
    });
  return url.substr(0, url.length - 1);
}

[obj63mc]

The pull request to resolve this has already been merged #74 you may just need to update your npm installation to the lastest version but should be working fine

[CaelanStewart]

@obj63mc – I realised that when looking into it more, but I checked that earlier and I'm already on the latest version (2.4.6).

The issue was the resulting URL the library sets as the iframe's src has a query string has these values (where JS casts null to the string 'null'):

• playlist=null
• list=null
• listType=null
• etc.

There is no need to pass a bunch of query string params containing 'null' anyway.

[stevethorson]

this is working for me now in version 2.4.6.