I want to wrap an href around a vimeo or youtube video and prevent the default playback click events of the embed and just go to the href. Does anyone know how to do this?

<a href="" target="_blank" class="linkwrap">

   <iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>    

 </a>

I want to wrap an href around a vimeo or youtube video and prevent the default playback click events of the embed and just go to the href. Does anyone know how to do this?

<a href="http://tumblr.com" target="_blank" class="linkwrap">

   <iframe width="420" height="315" src="https://www.youtube.com/embed/5Xbs60BMeRU" frameborder="0" allowfullscreen></iframe>    

 </a>

• javascript
• jquery
• iframe
• href

• ...perhaps it helps if you use JavaScript and apply stopPropagation on click at the a element. – pbaldauf Commented Mar 7, 2015 at 17:25

4 Answers 4

html

<a href="http://tumblr.com" target="_blank" class="linkwrap">
    <div class="blocker"></div>
    <iframe width="420" height="315" src="https://www.youtube.com/embed/5Xbs60BMeRU" frameborder="0" allowfullscreen></iframe>
</a>

css

.linkwrap { position:relative; display:inline-block; }
.blocker { position:absolute; height:100%; width:100%; z-index:1; background:rgba(255,0,0,0.5);  }
.linkwrap iframe { z-index: 2; }

jsfiddle - here

Use a div as overlay and surround it with your a tag. Read this article to see how to implement the div and using opaque for youtube: https://stackoverflow.com/a/4788044/4375900
I think with this info you should be possible to do what you want to do.

For cross browser support use this:

<div style="position:relative;">
<iframe width="420" height="315" src="https://www.youtube.com/embed/5Xbs60BMeRU" frameborder="0"></iframe>
<a  href="http://tumblr.com" target="_blank" style="position:absolute; bottom:0; left:0; display:inline-block;"><img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png" width="420px" height="315px"></a>
</div>

I feel like it's worth mentionning that in my case, adding pointer-events: none on the iFrame allowed the link to work with a structure looking like this

<div>
    <a href="#test">
        <iframe [ATTRIBUTES]></iframe>
    </a>
</div>