Pause video youtube, youtube api

Question

I am trying to pause a video on YouTube with the following code, which is pretty much a copy of the Youtube API page :

// 2. This code loads the IFrame Player API code asynchronously. var tag = document.createElement('script'); tag.src = "http://www.youtube.com/player_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // 3. This function creates an <iframe> (and YouTube player) // after the API code downloads. var player; function onYouTubePlayerAPIReady() { player = new YT.Player('player', { height: '315', width: '560', videoId: 'bpOR_HuHRNs', }); } 

Here's a demo in jsFiddle

However, it does not work. Does anyone have an idea how to do this?

Answer 1

Use player.playVideo(); (resume) and player.pauseVideo(); (pause) after the player is ready: http://jsfiddle.net/4WPmY/6/

 function onYouTubePlayerAPIReady() {   player = new YT.Player('player', {     height: '315',     width: '560',     videoId: 'bpOR_HuHRNs',   });   document.getElementById('resume').onclick = function() {     player.playVideo();   };   document.getElementById('pause').onclick = function() {     player.pauseVideo();   }; } 

Answer 2

Your HTML has several buttons for controlling the video:

 <input type="button" id="play"> <input type="button" id="pause"> 

Using jQuery, bind an event listener (click) to call a function on the player object:

 $(function() { $('#play').click(function() { player.playVideo(); }); $('#pause').click(function() { player.pauseVideo(); }); }); 

I built the application using YouTube Player and Data api. Take what you need: https://github.com/HunterMeyer/YouTV

Answer 3

 <div id="player"></div> <a href="#" id="resume">Play</a> 

In this code, I added the Resume and Pause buttons to one : Example

 // 2. This code loads the IFrame Player API code asynchronously. var tag = document.createElement('script'); tag.src = "https://www.youtube.com/player_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // 3. This function creates an <iframe> (and YouTube player) // after the API code downloads. var player; function onYouTubePlayerAPIReady() { player = new YT.Player('player', { height: '315', width: '560', videoId: '0Bmhjf0rKe8', events: { 'onStateChange': onPlayerStateChange } }); document.getElementById('resume').onclick = function() { PlayPause(); return false; }; } // 4. This function change name of tag click. var playerState; function onPlayerStateChange(event) { var getId = document.getElementById('resume'); if(event.data === 0) { getId.innerText = 'Play'; } else if(event.data === 1) { getId.innerText = 'Pause'; } else if(event.data === 2) { getId.innerText = 'Resume'; } else if(event.data === 3) { getId.innerText = 'Loading...'; } playerState = event.data; } // 5. This function Play/Pause the video. function PlayPause() { if(playerState == '1') { player.pauseVideo(); } else { player.playVideo(); } }