Question

what I have tried so far here : http://jsfiddle.net/yusaf/VVEY9/26/

I have a problem with my pause and play replacing and reverting

1. How can I have the .pause hidden on page load
2. when .play is clicked replace the element with the .pause element
3. when .pause is clicked revert to .play element

Answer 1

You could do something like this:

$(document).ready(function(){
 var obj = $('object')
     .wrap('<div id="test"></div>')
     .find('embed').attr('src', function(i,s){return s+'&enablejsapi=1&version=3'}).end()
     .find('param[name=movie]').attr('value', function(i,v){return v+'&enablejsapi=1&version=3'}).end()
     .detach()
     .appendTo($('#test'));

 $('.play').click(function(){
  obj.find('embed')[0].playVideo();
 });
 $('.pause').click(function(){
  obj.find('embed')[0].pauseVideo();
 })

 $('.pause').hide();
});

$(".play").click(function () {
  $(this).hide();
  $('.pause').show();
});

$(".pause").click(function () {
  $(this).hide();
  $('.play').show();
});