Question

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">?

Answer 1

$('#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