jQuery addClass example

Change class name on click in jQuery

by Anjana Silva

HTML

<div>
<div class="wrapper">  
  <div class="wrap_img_vid">
    <video controls="controls" preload='none'
        width="300" poster="http://media.w3.org/2010/05/sintel/poster.png">
        <source id='mp4' src="http://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4'/>
        <source id='webm' src="http://media.w3.org/2010/05/sintel/trailer.webm" type='video/webm'/>
        <source id='ogv' src="http://media.w3.org/2010/05/sintel/trailer.ogv" type='video/ogg'/>
    </video>    
    <button>
    Test
    </button>
  </div>
  </div>
  <div id="wrapper">
  <div class="wrap_img_vid">
  <button>
    Test
    </button>
  </div>
  </div>
  <div id="wrapper">
  <div class="wrap_img_vid">
  <button>
    Test
    </button>
  </div>
  </div>
</div>

JavaScript

$(document).ready(function() {
   setTimeout(function() {
       $('.wrap_img_vid button').click(function() {          
          var vid = $(this).siblings("video")[0];          
          if(vid.paused) {
              vid.play(); 
          } else { 
            vid.pause(); 
          }
       });
  });
});