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();
});
}
In the stopVideo() function, we are accessing all <iframe> elements and reinitializing the 'src' attribute value to start the YouTube video from first. In the above output, users can see they can stop multiple YouTube videos with a single click.
So all we are actually doing in the above snippet is reassigning the video source url to the iframe or video tag (in case of native videos embedded), and this will stop the video. We do so by getting a reference of the id of the element that contains the video or iframe tag in which the video is embedded.
The IFrame player API lets you embed a YouTube video player on your website and control the player using JavaScript. Using the API's JavaScript functions, you can queue videos for playback; play, pause, or stop those videos; adjust the player volume; or retrieve information about the video being played.
I have another solution:
<iframe id="player1" class="ytplayer" width="430" height="241" src="http://www.youtube.com/embed/HVhSasnVjMQ?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen></iframe>
<iframe id="player2" class="ytplayer" width="430" height="241" src="http://www.youtube.com/embed/HVhSasnVjMQ?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen></iframe>
and
$('.ytplayer').each(function(){
//this.contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
this.contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*')
});
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