Listening for Youtube Event in JavaScript or jQuery

0 votes

I have a slider which includes 4 youtube videos that are embedded via the iframe embed code

http://www.youtube.com/embed/'.$i.'?enablejsapi=1

I'm trying to make the onStateChange event of any of the four videos call a function I have called stopCycle() which will stop the slider when the video begins to play. The iframes do not have an id. I'm not sure about how to capture this event properly and could use any advice as to what i'm doing wrong.

<script charset="utf-8" type="text/javascript" src="http://www.youtube.com/player_api"></script>

var playerObj = document.getElementById("tab2"); // the container for 1 of the 4 iframes

playerObj.addEventListener("onStateChange", "stopCycle");

function stopCycle(event) {
    alert('Stopped!');
}

May 27, 2022 in JQuery by Edureka
• 13,690 points
2,463 views

1 answer to this question.

0 votes

I'm trying to get the onStateChange event for one of the four videos and call a function  called stopCycle () that stops the slider when the video starts playing. The iframe has no ID. I don't know how to properly capture this event, so I can use some advice on what's wrong.

<script charset="utf-8" type="text/javascript" src="http://www.youtube.com/player_api"></script>
 var playerObj = document.getElementById("tab2"); // the container for 1 of the 4 iframes
 playerObj.addEventListener("onStateChange", "stopCycle");
 function stopCycle(event) {
     alert('Stopped!');
 }
answered May 30, 2022 by gaurav
• 23,260 points

Related Questions In JQuery

0 votes
1 answer

How do I check if file exists in jQuery or pure JavaScript?

Hello @kartik, With jQuery: $.ajax({ url:'http://www.example.com/somefile.ext', ...READ MORE

answered Oct 5, 2020 in JQuery by Niroj
• 82,840 points
6,540 views
0 votes
1 answer

How to set cache false for getJSON in jQuery?

Hello @kartik, Your code just needs a trigger ...READ MORE

answered May 12, 2020 in JQuery by Niroj
• 82,840 points
1,014 views
+1 vote
2 answers

How to set cache false for getJSON in jQuery?

You can't pass any configuration parameters to ...READ MORE

answered Oct 7, 2020 in JQuery by Amit
• 140 points
2,974 views
0 votes
0 answers

using for loop in jquery

$(document).ready(function() { $for(i=1;i<8;i++) ...READ MORE

Jun 6, 2022 in JQuery by Edureka
• 13,690 points
580 views
0 votes
1 answer

How to add and remove classes in Javascript without jQuery

To add or remove a class on ...READ MORE

answered Jun 14, 2022 in JQuery by rajatha
• 7,680 points
993 views
0 votes
1 answer

jQuery event for images loaded

To check if an image is loaded ...READ MORE

answered Jun 16, 2022 in JQuery by rajatha
• 7,680 points
2,595 views
0 votes
1 answer

How to convert form data to JavaScript object with jQuery?

Hello @kartik, You can use: function form_to_json (selector) { ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,840 points
3,145 views
0 votes
1 answer

How to pass parameters in GET requests with jQuery?

Hello, Here is the syntax using jQuery $.get $.get(url, data, ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,840 points
43,938 views
0 votes
1 answer

Double arc shape with CSS jquery or javascript

But for this shape I would use ...READ MORE

answered Jun 14, 2022 in JQuery by gaurav
• 23,260 points
1,475 views
0 votes
1 answer

What is the difference between AJAX with JavaScript and jQuery?

JavaScript is a programming language. JQuery is ...READ MORE

answered May 30, 2022 in JQuery by gaurav
• 23,260 points
824 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP