Autoplay embeded video on any event with jQuery

I was searching something that autoplays the youtube video by clicking on the image. But found nothing instead of saying do ‘autoplay=1′.

By playing with jQuery I found the solution myself which worked for me in all the browsers. Here it is:

Demo

HTML:

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

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;
 }

jQuery:

$(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
    if($.browser.msie && $.browser.version <= '7.0'){ // check if it is IE7 or less as those versions does support only embed tag
      $(".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

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

Advertisement