CODEWITHSUNDEEP
javascriptjqueryhtmlxhtmlyoutube-api
terrygarcia
terrygarcia

Reputation: 477

Use JavaScript and jQuery to Make a Hyperlink to Play Embedded YouTube Video

Does anyone know how I would use JavaScript with jQuery to make a hyperlink to play an embedded YouTube video? I know that I could do: 

var player = document.getElementById("player");
$("#link").click(function(event){
event.preventDefault();
player.playVideo();
});

However, wouldn't this only work if I am using <embed> or <object>? I am using <iframe> to embed the video on my page. Would the document.getElementById("player") still work on the <iframe id="player">?

Upvotes: 1

Views: 1324

Answers (1)

user657496
user657496

Reputation:

$('#player') will still work and find the iFrame. However, to find elements within that iFrame, you will have to use $('selector', $('#player').contentDocument). To find elements in your document while executing javascript within the iframe, you will have to use parent.$('selector'). If you want to play a youtube video you can simply use this:

$('.youtubeLink').bind('click', function(e) {
    e.preventDefault();
    $('iframe').attr('src',$(this).attr('href'));
});

DEMO Btw, use the embedded link you can find on the youtube page as href of your a

Upvotes: 2

Related Questions