How to Control Pre-Existing YouTube Players with the JavaScript API?

Controlling Pre-Existing iFrame Players with the YouTube API

Understanding the Challenge

You want to control YouTube players that are already embedded in your HTML using the JavaScript API. The standard iframe API method for adding new videos doesn't apply to pre-existing players.

Solution Using a Custom Function: callPlayer

To address this issue, we'll use a custom function called callPlayer. This function allows you to call various YouTube player functions on any framed YouTube video on your page.

function callPlayer(frame_id, func, args) {
  // ... (function implementation)
}

Usage:

Once you have this function, you can use it like this:

callPlayer("whateverID", function() {
  // This function runs once the player is ready ("onYouTubePlayerReady")
});

// When the player is not ready yet, the function will be queued.
// If the iframe cannot be found, a message is logged in the console.
callPlayer("whateverID", "playVideo");

Resolving Common Issues:

Q: The video won't play.
A: Playback requires user interaction and the presence of allow="autoplay" in the iframe URL.

Q: I get an error message "An invalid or illegal string was specified".
A: You need to add ?enablejsapi=1 at the end of your iframe URL.

Q: The API doesn't work on a local host (file://).
A: Host your page online or use JSFiddle for testing.

Additional Features:

• Functions can be queued when the player is not ready.
• You can call the "onYouTubePlayerReady" event with the following syntax: callPlayer('frame_id', function() { ... } ).
• Full API support is available with the related implementation in a separate answer: "Listening for Youtube Event in jQuery."

The above is the detailed content of How to Control Pre-Existing YouTube Players with the JavaScript API?. For more information, please follow other related articles on the PHP Chinese website!