I have a video on my homepage and it's set to autoplay=0.
If someone clicks to start the video I want a quick lead form to pop up.. I can't seem to get it right... my code is below.. any help would be greatly appreciated. Thanks in advance.
Code:
<iframe src="http://player.vimeo.com/video/39931114?title=0&byline=0&portrait=0&color=000000&autoplay=0" onclick="document.getElementById('https://docs.google.com/spreadsheet/viewform?hl=en_US&formkey=dDY1M1F6ZHVWZkZfVVFsYnA4S1l2ZEE6MQ#gid=0').style.display = 'block'; return false;" width="940" height="705" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe><p><a href="http://vimeo.com/39931114" color="#000000">United States Karate Academy (USKA) - Self Defense</a> San Diego <a href="https://docs.google.com/spreadsheet/viewform?hl=en_US&formkey=dDY1M1F6ZHVWZkZfVVFsYnA4S1l2ZEE6MQ#gid=0">Click here to sign up now!!!</a> on <a href="http://vimeo.com/39931114">Mixed Martial Arts</a>.</p> <p></p></center>
I think to fix this problem you'll have to understand how DOM events work. When you click inside the IFRAME, the HTML document loaded in the IFRAME gets notified first. In fact, if I remember correctly, events originating from inside an IFRAME do not bubble up through the parent document. You'll never be notified in the parent document that the IFRAME document was clicked.
Instead, you'll want to position a DIV tag directly over top of the IFRAME and attach a click handler to that DIV.
I think to fix this problem you'll have to understand how DOM events work. When you click inside the IFRAME, the HTML document loaded in the IFRAME gets notified first. In fact, if I remember correctly, events originating from inside an IFRAME do not bubble up through the parent document. You'll never be notified in the parent document that the IFRAME document was clicked.
Instead, you'll want to position a DIV tag directly over top of the IFRAME and attach a click handler to that DIV.
Ok, well i the event handler to redirect text but for some reason it's not working with the iframe... do i need to change the iframe to and object or anything in particular?
Here is my code:
HTML Code:
<html><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script><script>
$(document).ready(function() {
/* Try to dis-comment this:
$('#a').click(function () {
alert('jQuery.click()');
return true;
});
*/
});
function button_onClick() {
$('#a').click();
}
function a_onClick() {
alert('Were moving you to google');
}
</script></head><body><br /><a id='a' href='http://www.google.com' onClick="a_onClick()"> CLICK ME AND I REDIRECT</a><iframe src="http://player.vimeo.com/video/39931114?title=0&byline=0&portrait=0&color=ffffff" width="940" height="705" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe><p><a href="http://vimeo.com/39931114">United States Karate Academy (USKA) - web video</a> from <a href="http://vimeo.com/user2728941">James Brown Media</a> on <a href="http://vimeo.com">Vimeo</a>.</p><p></p></body></html>
I see where you're going with this, but I imagined there was a better way of doing it unless I'm still missing the plot.
1. If I add size ratio and then position: relative; to the 'a' nothing happens at all. Apparently you can't re-size letters in that aspect.
2. I can't take the 'a' out and add the iframe it simply doesn't work even if it's the size ratio of the video. Additionally, I can't just use some invisible area that has 960 x 540 or whatnot. I figured there should be a way to do this.. I guess that's what I was hoping for.. :shrugs:
Unfortunately, the way i can get it to work I lose all the functionality of the player; and that way is to add an image to the height x width specs an then re-position over top of the video.
I don't really want to lose the functionality of the video completely.
I guess what I envisioned is for someone to click on the video and they either be redirected or I could have a quick javascript pop up asking them to fill out a short form and then they could proceed and watch the video.
Thanks for your time and attention to this thread. I'm really close to getting this fixed to how i envisioned.
Just need a bit more input if you have any other ideas. Thanks.
What you might be able to do is wrap the iframe in a div, set the style to position: relative; then inside the div, set the style position to absolute and the width and height to the site of your iframe with a anchor tag wrapped around it.
video onclick
Reply With Quote
Originally Posted by toicontien
Great!
Bookmarks