CODEWITHSUNDEEP
javascriptjqueryyoutube-api
Ronny K
Ronny K

Reputation: 3751

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

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.

Upvotes: 1

Views: 2743

Answers (3)

Shikiryu
Shikiryu

Reputation: 10219

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 :)

Upvotes: 0

Ashwin Singh
Ashwin Singh

Reputation: 7375

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>

Upvotes: 1

elo
elo

Reputation: 615

Look here

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

You have this function:

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

Upvotes: 2

Related Questions