Pausing YouTube iFrame API in JavaScript
javascript, jquery, youtube, youtube-api
Solution
Appending `?enablejsapi` in the embed string does not automatically include the API code. It only registers that particular embed with the API.
You want to read the first example here: https://developers.google.com/youtube/iframe_api_reference
- The asynchronous code snippet downloads and executes the YT iframe API
- `onYouTubeIframeAPIReady()` is fired when the API is ready
- Create a new `YT.Player` object
- Your code can now call `pauseVideo()` on your player object
You will most likely want to disable any events on your img until `onYouTubeIframeAPIReady()` has been fired.
Problem
I have a Youtube video embedded in a slideshow that I would like to pause when the user clicks on an `img` thumbnail: ``` <li><iframe width="430" height="241" src="http://www.youtube.com/watch?v=XjUz8IT0CYg?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen id="my-video"></iframe></li> ``` I've been over the Youtube API but I'm confused how to get things started. Does the API JS load automatically when I append `?enablejsapi` to the end of the YouTube `video id`? Here is my JS: ``` var player1 = document.getElementById('my-video'); $('img').click(function () { player1.pauseVideo(); }) ``` EDIT: Here's what I did based on Matt's answer below, for anyone wondering: ``` <li><iframe width="430" height="241" src="http://www.youtube.com/embed/XjUz8IT0CYg?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen id="player-1"></iframe></li> <li><iframe width="430" height="241" src="http://www.youtube.com/embed/HVhSasnVjMQ?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen id="player-2"></iframe></li> ``` And then my JS: ``` var tag = document.createElement('script'); tag.src = "//www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // Create YouTube player(s) after the API code downloads. var player1; var player2; function onYouTubeIframeAPIReady() { player1 = new YT.Player('player-1'); player2 = new YT.Player('player-2'); } ``` Then in `document.ready`: ``` $(document).ready(function () { $(".slideshow-1 img").click(function () { player1.stopVideo(); }); $(".slideshow-2 img").click(function () { player2.stopVideo(); }); } ```