Fire an event on play of youtube iframe embed
- DEMO: https://so.lucafilosofi.com/fire-an-event-on-play-of-youtube-iframe-embed/
<script src="https://www.youtube.com/iframe_api"></script>
<div class="module module-home-video">
<span class="module-strip">Latest Product Video</span>
<div id="video"></div>
</div>
<script>
var player, playing = false;
function onYouTubeIframeAPIReady() {
player = new YT.Player('video', {
height: '360',
width: '640',
videoId: 'RWeFOe2Cs4k',
events: {
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
alert('video started');
playing = true;
}
else if(event.data == YT.PlayerState.PAUSED){
alert('video paused');
playing = false;
}
}
</script>
You should be able to use the youtube javascript api, doing something like this:
var ytplayer = null;
// event that will be fired when the player is fully loaded
function onYouTubePlayerReady(pid) {
ytplayer = document.getElementById("ytplayer");
ytplayer.addEventListener("onStateChange", "onPlayerStateChange");
}
// event that will be fired when the state of the player changes
function onPlayerStateChange(state) {
// check if it's playing
if(state == 1) {
// is playing
}
}
To load your video in a embedded player you would use the following url:
http://www.youtube.com/v/RWeFOe2Cs4k?version=3&enablejsapi=1
I also think you should be able to add the iframe
directly like this:
<iframe id="ytplayer" type="text/html" width="640" height="360"
src="https://www.youtube.com/embed/RWeFOe2Cs4k?enablejsapi=1"
frameborder="0" allowfullscreen>
Reference: Youtube Javascript Player API