feross/yt-player

Simple, robust, blazing-fast YouTube Player API

yt-player's Issues

On Load Iframe event ?

Miss like a fundamental event for iframe, we need to know when its loaded, and currently there is no way to know that .. may i'm wrong ?

Feature request: Search Video by Artist or Track Name (Music Videos)

I need an app that can give me the name of the music video found so I can fetch metadata like coverart of lyrics from other external api's

regards and stay safe

Autoplay option not working, only api .play method do this as expected. WHY?

https://codepen.io/7iomka/pen/mdbYEwg?editors=1011
This demo demonstrate issue.
Please help me, in what I'm wrong?
Thanks for awesome plugin!

start and autoplay opts not working?

Hi everyone, I can't seem to get the start or autoplay opts working on new YTPlayer(). Any ideas? Thanks!

Neither caption and related options work.

I turned off related and turned on captions, neither of them work.

I don't have any caption, and I have video suggestions

Browser use

How to use in browser?

<script src='https://www.youtube.com/iframe_api' async></script> <script type="text/javascript" src="yt-player.js"></script> const player = new YTPlayer('#player')

I get "Uncaught ReferenceError: YTPlayer is not defined".

don't clobber an existing onYouTubeIframeAPIReady callback

@feross great module! Love the simplicity of it.

The only issue I see right now is related to my particular use case: My code runs as a 3rd party library in someone else's website. It's possible that the hosting site already has a onYouTubeIframeAPIReady function declared. Would you be open to a PR which does something like this?

if (typeof window.onYouTubeIframeAPIReady !== 'function') {
      window.onYouTubeIframeAPIReady = () => {
        while (loadIframeAPICallbacks.length) {
          const loadCb = loadIframeAPICallbacks.shift()
          loadCb(null, window.YT)
        }
   }
} else {
   const previous = window.onYouTubeIframeAPIReady
   window.onYouTubeIframeAPIReady = () => {
     if (previous) {
        previous()
     }
     loadCb(null, window.YT)
   }
}

Unpredictable playback quality across browsers/devices/network conditions

Title basically sums it up, but for a bit more detail:

I'm using yt-player extensively in a web app with a large percentage of users on mobile. On Chrome 78 for Mac with a strong WiFi connection I consistently get hd720 quality regardless of player size and other parameters. With an identical setup in Safari, quality for the same video seems more dependent on viewport/player size, but is still unpredictable: large at mobile width, then medium or hd720 at larger widths.

This is all basically fine, except on mobile: in Safari on iOS (13.1), videos start playing exclusively at hd720 and fail to adjust down to lower bitrates as necessary. On cellular networks this renders videos unplayable. (In Android browsers the quality seems much more adaptive to the device/network conditions.)

I've run into the same issue using a vanilla YouTube embed implementation and other wrapper libraries, so it seems like the issue likely lies within the black box of the YouTube API itself. But I'm wondering if anyone has encountered this issue before and if there aren't any known workarounds. I know the setPlaybackQuality method is non-functional, but are there any secrets to styling, positioning, or configuring the embed player to enable it to make reasonable automatic quality adjustments?

(PS thanks for the great work @feross!)

Gulp returning error when do minify

Gulp is returning some 'Unhandled 'error' event' whenever I tried to minify the js file with YTP included. Anyone experiencing this?

here is my code:

// Gulp - Compile ES6
gulp.task('scripts', () => {
    return browserify({ entries: main-dev.js, debug: true })
        .transform(babel, { presets: ["es2015"] })
        .bundle()
        .on('error', onError)
        .pipe(source('main.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init('loadMaps: true'))
        .pipe(jsOutput()) // if in production do uglifiy()
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(jsPaths.dest))
        // .pipe(reloadBrowserSync);
});

And this is how i import the package

import $ from 'jquery';
import YTPlayer from 'yt-player';

//the rest of code

As a consumer, I'd like for the package to be pre-compiled so that I can use it with create-react-app

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify

How to get Video Metadata like Video Title etc from a video id

Hey,

Its just a question and not bug as i haven't understand using options to get videotitle/name of the video from youtube.
player = new YTPlayer(element, [opts]) - this is not clear for a developer who use this library for first time.

Can someone please suggest me to get videotitle or other information of a video id?

Thanks in advance.

Angular 2+ support

Is there a way of currently use it with angular6? I know this isn't an issue and more of a feature request, but it could be really useful for Angular2 Plus apps especially since there is no good free package to use YouTube iframe api currently available for it.

How to get player instance for already initialized videos?

I have slider with video in some slides, I need to control video playback when slide goes active or goes out, How can I get Player instance to use play() stop() methods?

Link demo is not working

https://play.cash/ is not working. It throws 500 in the console log when I play song. I'm going to check if it is working on iOS. Thanks in advance.

Modest branding fix, more opts, and added event emit for onReady.

Hey, I noticed there were some missing options and events for the player. I added them to this fork if you're interested in bringing them into the project.

https://github.com/die20/yt-player

Thanks!

There is an autoplay problem

Hi everyone, I am testing the video with autoplay but it doesn't work.

`
const idHeader = document.querySelector('.header-video');
const player = new YTPlayer('#player', {
width: '100%',
fullscreen: true,
autoplay: true,
controls: false,
captions: false,
modestBranding: false,
related: false,
});

const index = idHeader.dataset.id;
player.load(index, [true, 0]);

`

Help me how to solve the issue.
Thanks You!

can not play

myProject is use vue-cli3 + electron, i can play video in development, but build is error. do you know happing?

Error thrown when calling player.load

I have the following snippet:

import { default as YTPlayer } from 'yt-player'
const player = new YTPlayer(angular.element($document[0].getElementById('player')))
player.load('D5drYkLiLI8')

This results in the following error being thrown:

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
    at Y.S (www-widgetapi.js:103)
    at new Y (www-widgetapi.js:135)
    at YouTubePlayer._createPlayer (index.js:270)
    at YouTubePlayer.load (index.js:108)
    at YouTubePlayer._loadIframeAPI (index.js:93)
    at window.onYouTubeIframeAPIReady (index.js:259)
    at www-widgetapi.js:159
    at www-widgetapi.js:159

how const and class keywords are possible without babel?

I did not carefully check the iframe origin cause. Please ignore this issue

I can use the api of the player in the localhost , such as player.on('unplayable', (videoId) => {}).But After uploading to the server, it will be invalid. Could you tell me how to check this?

loadIframeAPICallbacks is not defined

Hello, thanks for this library! I'm trying to load it into a Webpack environment and receive the following error when trying to instantiate a Youtube player. Any ideas what could cause this?

React Native

Can support for react native be added? It is just an addition of a few more lines to support WebView:

https://github.com/LonelyCpp/react-native-youtube-iframe

An in-range update of standard is breaking the build 🚨

The devDependency standard was updated from 13.0.0 to 13.0.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

standard is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

---

Commits

The new version differs by 4 commits.

• c713e2e 13.0.1
• 72e0f1b Update CHANGELOG.md
• 934a5b8 [email protected]
• 501624c Update CHANGELOG.md

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

getAvailablePlaybackRates() returns [1] even when the usual values are possible

I'm tried ids of W56sNw6x7qQ and MqAWGhEKEDI for this one, don't ask me why. setPlaybackRate() has no effect either when 0.5 or 0.25 are used. (I assume the rest don't either by proxy.) Is this just an outlier case, or is there a genuine bug? Another thing to note is that I'm testing this locally in Chromium on Linux, using browserify to compile.

EDIT: Just been poking my nose in the YouTube IFrame API, so I assume it gets the values straight from its equivalent function. I suppose it's a problem with that, right?

Any chance of this working on IE 11 / 10

I see from the readme that IE 11 and below are not supported. Is there anything at all that could allow this plugin to work with IE? Polyfills perhaps?
Is there perhaps a webpack / babel preset that can help with this issue?

Love this plugin, but its a shame because unfortunately I still have to support those older versions of IE.

Stupid question

As is it known YT Iframe API works on front-end. My question is: How can we use 'require' on front-end part?
After a little search I found that it is suggested on Stack to use tool like Ender or Parcel.
Is it yours implied ways to works with this npm?
Let me know..

Listeners not working

I am using this in my application and it has been working properly for a while but occasionally it will just break and none of the listeners will function properly (any instance of a .on I have in my app is no longer working). This has happened once before and I started working on a workaround but then the problem went away. But now it's broken again. Please let me know if this is fixable or I should find another solution.

package.json miss thunky dependency

redefine width and height while resize the window

Hi @feross,
Very nice plugin, much more practical than what Google gives us ! I lost a few hours with them, and did everything in an hour with yours, congrats.

One thing : I try to make the iframe responsive like on this website: big mamma

In order to do that, I would need to change dynamically, inside a function called by window.addEventListener('resize'), the player options width ans height.
I hopeless tried it by doing player._opts.height = someValue but it's not changing the actual iframe dimensions.
It seems that once the player is loaded with some parameters, there is no way to modify those without reloading the page. Is it or did I miss something ? Do you have something to propose ?

[Feature Request] Add missing Youtube iFrame API param

Hi,

Thanks for this nice abstraction of the youtube iFrame API, it's pretty cool.

But I'm wondering why you didn't give access to the following params:

• cc_lang_pref
• hl
• color

cc_lang_pref and hl could be link to a new option language option of your plugin.
color have two option red or white.

Could you consider adding this feature?

Cheers!

Failed to execute postMessage on DOMWindow

Hi !

The following error keeps showing up constantly for a few days.

• the website uses HTTPS
• there is no autoplay
• the origin is set manually just in case (ie: no window.location.origin)

www-widgetapi.js:629 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://youtube.com') does not match the recipient window's origin ('https://www.DOMAIN.TLD').

Tested on Chrome, Firefox and Safari.

The code is as follow:

      this._player = new YTPlayer('#player', {
        width: '100%',
        height: '100%',
        caption: false,
        controls: false,
        keyboard: false,
        fullscreen: true,
        annotations: false,
        modestBranding: true,
        related: false,
        host: 'https://www.youtube.com',
        showInfo: false,
        origin: 'https://www.DOMAIN.TLD'
      })
      this._player.load(this._YTVideoID)

Did I miss something?

Feature request: method to load playlists

Hi, the YouTube API also offers method for loading lists such as cuePlaylist and loadPlaylist but there's no equivalent in this package yet. Would you be open to a PR?

To follow the API you did for load we could have a player.loadPlaylist(videoId, [autoplay]).

.play() doesn't work on IOS devices

I'm trying to use your package to init and play youtube videos.
However, unfortunately, I have found an issue - .play() method doesn't work on IOS mobile devices.
Plz, see sample - https://93xqv1vzxy.codesandbox.io/

It has been tested on iPhone 5s (12.0.1 - 16A404) and in the Xcode simulator (iPhone XS Max and iPhone 8 Plus) - browsers Safari and Chrome (70.0.3538.75)

player.play(); not playing at all.

Hello,

I am trying to use your yt-player npm module because it looked interesting, unfortunately I can't seem to get my iframe to play the video.

This is the way my front-end works :

• iframe at the back, cover img tag over it
  , js click event on the image to fadeout the image, and get the youtube iframe to play the video.

I have an HTML iframe with an src already defined on load, then :

In the JS :

this.$video = this.$root.querySelector('iframe');
this.player = new YTPlayer(this.$video);
_( with or without `.load` method, same result)_
this.player.play();

I have no error, but the video doesnt start.
Did I forget anything ?

Thanks for any help

demo site

would be great to see this player used on a simple demo page, so one can easier see what to expect from the yt-player

Playing encrypted-media.

Some of popular videos aren't able to play on my website, is it possible to allow encrypted-media to play, you can do it when adding an iframe with video, but i didn't found a way to do it with yt-player.

Landscape Issue

phone mode is portrait mode and click on full screen button of youtube video but video is not view landscape.

please help me.

Thanks in advance!

Make yt-player responsive by default

I have been experimenting with iframe and haven't figured out a proper solution to make it responsive, so in mobile devices, player takes the full width. Is this something you are focusing for this library?

IMHO, this is the most common scenario and in seekTo method, if I don't set the boolean flag, video keeps on buffering and doesn't play at all.

Get reference to original YTPlayer

I want to get the video data like width, height and others. As I can see the Original Playyer stored in _player is not exposed. Could you change that?

How can i add Play list or how can i display play list using iframe?

Not able to add playlist

Accessing DOM Elements in Node?

Hi, sorry if this is a basic question. When I attempt to start up an Express server to run the example code, I get this error:

/Users/me/Project/node_modules/yt-player/index.js:48
? document.querySelector(element)
^
ReferenceError: document is not defined

In the actual file I assume it is because the parameter in the function
const player = new YTPlayer('#player');
Is using the querySelector function.

How might I access the DOM from a Node file? Is it necessary to use Browserify or something to run all of it in the frontend?

Thanks for the package.

UglifyJS error when building the project

Hi,

Thanks so much for the excellent library.
It works really wonderfully while on development mode, however when I try to run the webpack build, I'm getting the following error message:

ERROR in app.min.js from UglifyJs
Unexpected token: name (YouTubePlayer)

I have the following babel dependencies installed:

    "babel": "^6.5.2",
    "babel-core": "^6.24.0",
    "babel-loader": "^7.1.1",
    "babel-plugin-lodash": "^3.2.11",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-runtime": "^6.22.0",

Any tip on why is just the uglify process that breaks?

Standalone script is not loading...

Im looking for standalone script https://bundle.run/yt-player
this is on the read me file but it isnt loading...

Problem with multiple instance

Hello !

Firstly, thanks for the library, the wrapper is amazing.

I have a question regarding multiple YT.Player instance. We are calling new YT.Player inside different react component but once one YT.Player is loaded, the others instances failed to boot.

I've read the Youtube Iframe documentation and i'm afraid that onYouTubeIframeAPIReady will be only called once after the first library loading. I hope i am missing something and maybe you have a solution.

I also found this exemple (https://jsfiddle.net/wzalazar/72NYY/) but i cannot give all the players id on the first boot, some of them are loaded after the first instance.

Best regards,

Any idea about how to overpass the initiated by gesture error?

Im working on an app similar to play.cash and I'm having problems on mobile devices:

base.js:6008 Failed to execute 'play' on 'HTMLMediaElement': API can only be initiated by a user gesture.

I know this issue is not related with the library itself but maybe you have faced a similar situation.

thx

How to know when metadata has loaded?

It says that player.getDuration will return 0 unless metadata has loaded.

But I can't find any event for that.

Is there a player.on('ready' type event that I can use to make sure it's loaded before I call getDuration? I tried it but it doesn't seem to work.

Any ideas?

Use yt-player in react native android App

Hi feross. I'm trying to use yt-player in react native, but I cannot render the player. Can you give me a example for react native?

destroy before loaded: this._player.stopVideo is not a function

Calling player.destroy() will occasionally throw a TypeError if the video hasn't finished loading.

Uncaught TypeError: this._player.stopVideo is not a function
    at YouTubePlayer._destroy (index.js:225)
    at YouTubePlayer.destroy (index.js:217)

Because of the error, the iframe is never cleaned up and the underlying sdk player isn't destroyed.

Code to reproduce

import YTPlayer from "yt-player";
const player = new YTPlayer("#video");
player.load("SB-qEYVdvXA");
setTimeout(() => player.destroy(), 100);

Live example: https://codesandbox.io/s/ytplayer-stopvideo-bug-8u9hl

Unable to find the imported file or module 'events'

On compilation I receive the following error:

Unable to find the imported file or module 'events'.

the source of the error is on line 2 of index.js:

const EventEmitter = require('events').EventEmitter.

This is an old project that was previously working. I have tried deleting my node_modules directory and reinstalled packages - but still the same error.

Why using Ids?

Why do you use an id to create the api.player?
We can provide a selector or an element.
Then you search for the corresponding element to find its id to pass to api.player constructor.
If we provide an element, you are searching for it's ID to provide to api.player so that it can search for the element!

Problem is, in a Virtual DOM, the api.player cannot access the inner element of a virtual DOM. Passing the element itself solves the problem.

Thanks.