Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

jQuery Approach

After taking a screenshot of that video, place it as background of the anchor element. Will use “video-in-link” as the class name to be used as the jQuery selector. With inline CSS will set the anchor as a block element and give it the same dimensions of the flash video player. For graceful degradation, the anchor will link to that video page for browsers with javascript disabled. Wrap the video embed code with HTML comment and place it inside the anchor.

<a href="http://www.youtube.com/watch?v=UmN5JJkXPiE" class="video-in-link"
   style="background:url(video1.jpg); width:425px; height:344px; display:block">
   <!--
   <object width="425" height="344">
      <param name="movie" value="http://www.youtube.com/v/UmN5JJkXPiE?fs=1&amp;autoplay=1"></param>
      <param name="wmode" value="transparent"></param>
      <param name="allowFullScreen" value="true"></param>
      <param name="allowscriptaccess" value="always"></param>
      <embed src="http://www.youtube.com/v/UmN5JJkXPiE?fs=1&amp;autoplay=1" 
         type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" 
         width="425" height="344" wmode="transparent"></embed>
   </object>
   -->
</a>

Next, will include jQuery javascript file from Google CDN. On document ready Will use "One" method to attach a click event handler -one time only- on anchors with the class name “video-in-link”.. In click handler will simply remove comment markup from the inner HTML of the anchor and remove its “href” attribute..

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
   $("a.video-in-link").one('click',function(){
      var anchor = $(this);
      anchor.html(anchor.html().replace('<!--','').replace('-->',''));
      anchor.removeAttr('href');
      return false;
   })
})
//]]>
</script>

Non-jQuery Approach

For Javascript-only version will use the onClick attribute to call a javascript function and pass the clicked anchor using “this” keyword.

<a href="http://www.youtube.com/watch?v=THdJZ2VXUm0" onclick="videoInLink(this)" 
   style="background:url(video2.jpg); width:425px; height:344px; display:block">
   <!--
   <object width="425" height="344">
      <param name="movie" value="http://www.youtube.com/v/THdJZ2VXUm0?fs=1&amp;autoplay=1"></param>
      <param name="wmode" value="transparent"></param>
      <param name="allowFullScreen" value="true"></param>
      <param name="allowscriptaccess" value="always"></param>
      <embed src="http://www.youtube.com/v/THdJZ2VXUm0?fs=1&amp;autoplay=1" 
         type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"
         width="425" height="344" wmode="transparent">
      </embed>
   </object>
   -->
</a>

Next, the Javascript function to be called on click. This time we need to set the onclick to “null” to remove the click handler from the anchor after the first click.

<script type="text/javascript">
//<![CDATA[
function videoInLink(anchor){
   anchor.innerHTML = anchor.innerHTML.replace('<!--','').replace('-->','');
   anchor.removeAttribute('href');
   anchor.onclick= null;
   return false;
};
//]]>
</script>

Few Notes

Don’t forget that video must be set as auto-play! User has already clicked the anchor, no need to click again to play the video. For Youtube videos, use an additional query parameter “autoplay=1″ to setup the video as auto-play.

Will also set “wmode” parameter of the flash object as “transparent” to avoid having a blinking white background when flash starts to load.