how can I stop a youtube video when a div is clicked?

Question

I have div that shows infront of a youtube video. How can I stop the video when it is clicked? check out my example. http://jsfiddle.net/uprosoft/6wXvA/81/

thanks.

Answer 1

Look here

http://apiblog.youtube.com/2011/01/introducing-javascript-player-api-for.html

You have this function:

 function stopVideo() {
    player.stopVideo();
}

Answer 2

You can't control using iFrame, you need

<object id="ytplayer" style="height: 390px; width: 640px">
    <param name="movie" value="http://www.youtube.com/v/NWHfY_lvKIQ?version=3&enablejsapi=1">
    <param name="allowScriptAccess" value="always">
    <embed id="ytplayer" src="http://www.youtube.com/v/NWHfY_lvKIQ?version=3&enablejsapi=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390">
</object>

<div onclick="document.getElementById('ytplayer').stopVideo()">Stop</div>

Answer 3

You can't access the DOM from an iframe if the main document and the iframe's one aren't from the same domain.

i.e.: from chrome console:

Unsafe JavaScript attempt to access frame with URL http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque from frame with URL http://fiddle.jshell.net/_display/. Domains, protocols and ports must match.

If you want to control youtube video, you need to embed it into your page.

On a youtube video, click on "Embed", then check this box :

Use old embed code [?]

you'll have the good code :)