Trap for click on IFRAME

Question

I have a an iframe which inside there is a video link from somwhere. I want popup a div when click on iframe.

<a href="javascript:alert();" class="iframelink">
                <iframe src="http://www.youtube.com/embed/zDNXx-PgU3k" width="213" height="195" frameborder="0"></iframe>
            </a>


$('.iframelink').click(function(){   
         alert('iframe clicked. Open popup.'); 
})

How? But because is actually another page javascript cant catch click event. Is there any way?

The mouse button is depressed while the pointer is inside the element. The mouse button is released while the pointer is inside the element. — gandil, Jan 30 '12 at 15:55

ShankarSangoli · Accepted Answer · 2012-04-25T15:01:47.600

2

Since you have to attach the handler on a link inside an iframe, you should find it inside the iframe. Try this.

$('a.iframelink iframe').contents()//Will get iframe contents
.find('videoLinkSelector')//Pass the required selector
.click(function(){
   //Write your code here
});

contents() reference: http://api.jquery.com/contents/

Note that you can only access iframe resources only if it is in the same domain as its parent page.

edited Apr 25 '12 at 15:01

answered Jan 30 '12 at 15:51

ShankarSangoli

69,612
13
93
124

This won't work if the iframe content comes from another domain, because of same origin policy. – chrisv Apr 25 '12 at 06:39
Yes, you cannot access any resource from other domain. – ShankarSangoli Apr 25 '12 at 15:01

score 1 · Answer 2 · answered Jan 30 '12 at 15:48

1

Apart from being rather naughty and placing an invisible element over the top of your IFRAME (click-jacking), I think you're out of luck as I don't think events within the IFRAME bubble up at all. Careful here - you're in dangerous territory. Thar be monsters.

P.S. one option would be to have the IFRAME point to a page on your site, that you could add an onclick event to - which would then fire a function/event on the parent element - however you're still going to be out of luck when it comes to firing on clicking the FLASH object I think.

answered Jan 30 '12 at 15:48

Seidr

4,946
3
27
39

actually i want to display video inside a iframe but with small size. When user click iframe to run video i will popup a box and run video. i know but is there any workaround? – gandil Jan 30 '12 at 15:51
Ahh I see - I mistunderstood what you were trying to achieve. hunters' answer may be more suited. By the way, why do you need to show the video inside an iframe - you could show the videos thumbnail on your page and attach an onclick event to that surely? – Seidr Jan 30 '12 at 15:53
of course. is there any way just show videos thumbnail from url inside a div? – gandil Jan 30 '12 at 15:57
You can get thumbnails for YouTube videos by using this URL: http://img.youtube.com/vi//0.jpg 0.jpg can be changed to 1.jpg for a smaller version of the image. You can either use that in an IMG tag, or set it as a background image in a DIV element and explicitly set a width and height to match the thumbnail image. – Seidr Jan 30 '12 at 15:59
see following question and answer for more info about layering over IFRAMEs: http://stackoverflow.com/a/4788044/683808 – chrisv Apr 25 '12 at 07:05

score 1 · Answer 3 · answered Jan 30 '12 at 15:50

1

You can try to leverage the YouTube API.

http://code.google.com/apis/youtube/js_api_reference.html#Adding_event_listener

Though it is limited you may be able to do what you need to.

answered Jan 30 '12 at 15:50

hunter

62,308
19
113
113

so, for other video provider what will i do? is there any generic solution when an iframe clicked make a handler? – gandil Jan 30 '12 at 15:52

Trap for click on IFRAME

3 Answers3