YouTube iframe API how do I control an iframe player that s already in the HTML

0 votes

I want to have control over YouTube players that use iframes. I want to control these players using the JavaScript API even though they will already be in HTML.

I've been reading the iframe API documentation, which explains how to use the API to add a new video to the page and then use the YouTube player capabilities to control it:

var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('container', {
        height: '390',
        width: '640',
        videoId: 'u1zgFlCw8Aw',
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

This code generates a fresh player object, assigns it to the variable "player," and then puts it into the #container div. After that, I may manipulate 'player' by calling functions like playVideo() and pauseVideo().

However, I need to be able to interact with the iframe players that are already there on the page.

With the previous embed method, I could accomplish this extremely quickly by using something like:

player = getElementById('whateverID');
player.playVideo();

However, the new iframes prevent this from working. How can I assign an existing iframe object on the page so that I can use the API operations on it later?

Aug 8, 2022 in HTML by Tejashwini
• 780 points
1,316 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In HTML

0 votes
0 answers

How can I change the line spacing for one paragraph in an HTML email template?

I want to add html commands that ...READ MORE

Jul 24, 2022 in HTML by Ashwini
• 5,430 points
657 views
0 votes
0 answers

How do I create an HTML button that acts like a link?

How can I make a button in ...READ MORE

Jul 8, 2022 in HTML by Tejashwini
• 3,820 points
381 views
0 votes
0 answers

How can I set the default value for an HTML <select> element?

I believed that by setting the "value" ...READ MORE

Jul 26, 2022 in HTML by Ashwini
• 5,430 points
641 views
0 votes
0 answers

How to view an HTML file in the browser with Visual Studio Code?

With the new Microsoft Visual Studio Code, ...READ MORE

Aug 10, 2022 in HTML by Deepak
• 980 points
760 views
0 votes
0 answers

how do you increase the height of an html textbox

How can the height of a textbox ...READ MORE

Aug 12, 2022 in HTML by Tejashwini
• 3,820 points
377 views
0 votes
1 answer

How do I give text or an image a transparent background using CSS?

In order to ensure that your image ...READ MORE

answered Feb 8, 2022 in HTML by Rahul
• 9,680 points
1,229 views
0 votes
1 answer

Presenting docket dtates inside html page by javascript

Use the Docker Engine Api:Docker Engine API ...READ MORE

answered Jun 20, 2018 in Docker by DareDev
• 6,890 points
732 views
0 votes
1 answer

Migrating proxy npm repo in nexus 3

I don't think you can achieve this ...READ MORE

answered Jun 22, 2018 in DevOps Tools by DareDev
• 6,890 points
1,520 views
+1 vote
1 answer

What is the difference between JavaScript and Java

This quote rightly explains that 2 totally ...READ MORE

answered Jun 29, 2018 in Java by Daisy
• 8,140 points
787 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