Autoplay embeded video on any event with jQuery
April 21, 2011,
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.
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
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 clicking on image:
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.
