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 in HTML by Tejashwini
• 540 points
92 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 in HTML by Ashwini
• 1,160 points
55 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 in HTML by Tejashwini
• 1,960 points
28 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 in HTML by Ashwini
• 1,160 points
48 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 in HTML by Deepak
• 940 points
44 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 in HTML by Tejashwini
• 1,960 points
16 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 in HTML by Rahul
• 9,240 points
177 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
233 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
831 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,120 points
257 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP