I'm trying to pause and play YouTube videos with the following code which is pretty much a copy from 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's not working. Anyone have a idea how to do this?
By reassigning the value of 'src' attribute of <iframe> This approach will simply replace the src attribute value if <iframe> element. When we replace the same video URL, it will start from the beginning and work as the stop functionality.
Developers can use the iFrame API to programmatically create and interact with an Embed or with multiple Embeds in the same web app. The iFrame API includes methods that you can use to start playback, change the content rendering in an Embed, or stop playback.
YouTube Data API costs are based on quota usage, and all requests will incur at least a 1-point quota cost. For each project, you're allowed 10,000 free quota units per day.
Use player.playVideo();
(resume) and player.pauseVideo();
(pause) once 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();
};
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With