Create YT.Player object from iframe in HTML by passing DOM object

Question

I have an embedded youtube video iframe in my html that I need to stop programatically, but I am unable to set the id of the iframe. Therefore I am trying to create the youtube object by passing the DOM element to the YT.Player constructor rather than the iframe id, as specified in the docs. I have also appended '?enablejsapi=1' to the end of my iframe src url. I have loaded the youtube js api at the top of my js file using the following code: ``` var tag = document.createElement('script'); tag.src = "http://www.youtube.com/player_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); function onYouTubePlayerAPIReady(){ console.log('yt api ready'); } ``` After that I have the following code: ``` $(function(){ $('a.close').click(function(){ var player = new YT.Player($('iframe').get(0)); player.stopVideo(); }); }) ``` I get the output: ``` yt api ready Uncaught TypeError: Object [object Object] has no method '…

Accepted Answer

I needed to move the stop video call into the player object's ready event. The following changes fixed it for me

Added the following function:

```
function onMyPlayerReady(event) { event.target.stopVideo(); }
```

And changed the yt.player constructor to:

```
new YT.Player($('iframe').get(0), { events: { 'onReady': onMyPlayerReady } });
```

Create YT.Player object from iframe in HTML by passing DOM object

Solution

Problem