www.webdeveloper.com
Results 1 to 10 of 10

Thread: video onclick

  1. #1
    Join Date
    Jun 2011
    Location
    California
    Posts
    383

    Smile video onclick

    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>

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    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.

  3. #3
    Join Date
    Jun 2011
    Location
    California
    Posts
    383

    Question

    Quote Originally Posted by toicontien View Post
    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&amp;byline=0&amp;portrait=0&amp;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>

  4. #4
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773

  5. #5
    Join Date
    Jun 2011
    Location
    California
    Posts
    383

    Wink

    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.

  6. #6
    Join Date
    Jun 2012
    Posts
    20
    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.

    For example,

    Code:
    <div style="position:relative;">
    	<iframe style="width:100px;height:100px;" src="www.google.com"></iframe>
    	<a href="#" onClick="code">
    		<div style="position:absolute;width:100px; height:100px;z-index:1000;"></div>
    	</a>
    </div>
    This should overlay the div on top of the iframe and you can write whatever js code you want to trigger.

  7. #7
    Join Date
    Jun 2011
    Location
    California
    Posts
    383

    Thumbs up Great!

    Thanks Nemesis02!

    I'll give that a go in a few, currently bounced away from that project to code other stuff. I'll definitely let you know if it works.

  8. #8
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    No need to put a DIV inside of an A:
    Code:
    <div style="position:relative;">
    	<iframe style="width:100px;height:100px;" src="www.google.com"></iframe>
    	<a href="#" onClick="code"  style="position:absolute;width:100px; height:100px;z-index:1000;"></a>
    </div>

  9. #9
    Join Date
    Jun 2011
    Location
    California
    Posts
    383
    Revisting this problem... still haven't been able to get it to work.

    here is my video...


    <iframe src="http://player.vimeo.com/video/46452944?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff&amp;autoplay=1" width="940" height="529" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p><a href="http://vimeo.com/46452944">United States Karate Academy</a> from <a href="http://vimeo.com/user2728941">James Brown Media</a> on <a href="http://vimeo.com">Vimeo</a>.</p> <p></p>

  10. #10
    Join Date
    Jun 2011
    Location
    California
    Posts
    383

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles