Some times you asked form the client to autoplay the embedded YouTube video by clicking or hovering on the image. I was also searching something that autoplays the youtube video by clicking on the image. But found nothing instead of saying do ‘autoplay=1’. So created nyjvideo jQuery plugin which works in all the modern browsers.

Demo

HTML that you need

<div class="homevideo">
  <span id="vidimg"> </span>
  <div class="videoplayer">
    <object width="640" height="390">
      <param name="movie" value="http://www.youtube-nocookie.com/v/6pW7mGr8oAU?fs=1&hl=en_US"></param>
      <param name="allowFullScreen" value="true"></param>
      <param name="allowscriptaccess" value="always"></param>
      <embed src="http://www.youtube-nocookie.com/v/6pW7mGr8oAU?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="390"></embed>
    </object>
  </div>
</div>

Styling with CSS

.homevideo #vidimg {
  background: url('images/video-player-image.png') no-repeat top left;
  z-index: 32767;
  border: 1px solid #eee;
  display: inline-block;
  width: 480px;
  height: 280px;
  cursor: pointer;
  float: left;
}

NYJVideo at a glance

$(function() {
  // VIDEO AUTO PLAY ON CLICK EVENT
  $(".videoplayer").hide(); // first hide the video
  $('#vidimg').click(function() {
    $(".videoplayer").show(); // show the video
    $('#vidimg').fadeOut(0); // disappear the image
    var embedsrc = $(".videoplayer embed").attr('src'); // get the embeded src or url
    var embedbasic = 'width="480" height="280" allowfullscreen="true" allowscriptaccess="always" type="application/x-shockwave-flash"'; // get other properties of embeded video
    $(".videoplayer embed").remove(); // remove the default tag with its content
    var appendVid = '<embed '+ embedbasic +' src="'+ embedsrc +'&autoplay=1"></embed>'; // append the tag with 'autoplay=1' in src
    var objSafari = '<object height="390" width="640"><param name="movie" value="'+ embedsrc +'&autoplay=1"></param>'+
       '<param name="allowFullScreen" value="true"></param>'+
       '<param name="allowscriptaccess" value="always"></param></object>'; // <object> snippet for Safari browser as it does not supports embed tag
    // check if it is IE7 or less as those versions does support only embed tag
    if ($.browser.msie && $.browser.version <= '7.0') {
      $(".videoplayer").append(appendVid);
    } else if (navigator.userAgent.toLowerCase().indexOf( "safari") != -1) {
      $(".videoplayer object").remove();
      $(".videoplayer").append(objSafari);
    } else {
      $(".videoplayer object").append(appendVid);
    }
  });
});

Output

Image before the video:

Image before playing the video

Image before playing the video

Autoplaying video after clicking on image:

Autoplaying video after image click

Autoplaying video after image click

As we can’t get control over <iframe> inner content, using <object> tag is the best option. This can be done with PHP, MySQL, WordPress as well for dynamic content.

Demo

You might also like:

Related Post