CODEWITHSUNDEEP
javascriptjquerywordpresshtml5-video
Daniel Vianna
Daniel Vianna

Reputation: 581

Onclick play Jquery trigger for multiple videos

I am trying to create a trigger for each video to play on click using Jquery, however it only works the method I found needs the tag data group to be applied in the HTML. I am creating this trigger via visual composer (wordpress) and I can only apply a custom class and ID to each video, so I can't use the current method

Codepen https://codepen.io/danielvianna/pen/jLBdYo

HTML

<div class="video_container">
<video class="video-ctrl" loop="" playsinline="" autoplay>
    <source src="http://sandbox.cast-soft.com/wp-content/uploads/2017/04/seating_handbrake.mp4" type="video/mp4">
  </video>
</div>

<div>
    <span class="truss_wizard" data-group="play">clickme1</span>
    <video poster="http://sandbox.cast-soft.com/wp-content/uploads/2017/04/truss_wizard_poster.jpg">
    <source src="http://sandbox.cast-soft.com/wp-content/uploads/2017/04/truss_handbrake.mp4" type="video/mp4">
    </video>
</div>

<div>
    <span class="projection_wizard" data-group="play">clickme2</span>
    <video poster="http://sandbox.cast-soft.com/wp-content/uploads/2017/04/projection_poster.jpg">
    <source src="http://sandbox.cast-soft.com/wp-content/uploads/2017/04/projection_handbrake.mp4">
    </video>
</div>

<div>
    <span class="pipe_drape_wizard" data-group="play">clickme3</span>
    <video poster="http://sandbox.cast-soft.com/wp-content/uploads/2017/04/Pipe-and-Drape_poster.jpg">
    <source src="http://sandbox.cast-soft.com/wp-content/uploads/2017/04/pipe_drape_handbrake.mp4" type="video/mp4">
    </video>
</div>

Jquery code

//making it more dynamic with a data attribute
//  <span class="square" data-group="play2">clickme2</span>

jQuery(function($) {
  //change the elements so they have a class and you can find multiple
    var $players1 = $('.truss_wizard');
    var $players2 = $('.projection_wizard');
    var $players3 = $('.pipe_drape_wizard');

    $players1.click(function() {
    //find all the playbutton elements
    $players1.filter('[data-group="'+ $(this).data('group') +'"]')
    //get all their parent divs
    .closest('div')
    //find their nested videos
    .find('video')
    //play each of them
    .each(function(){ this.play();
                    });
    $players2.click(function() {
    //find all the playbutton elements
    $players2.filter('[data-group="'+ $(this).data('group') +'"]')
    //get all their parent divs
    .closest('div')
    //find their nested videos
    .find('video')
    //play each of them
    .each(function(){ this.play();   
                         });
    $players3.click(function() {
    //find all the playbutton elements
    $players3.filter('[data-group="'+ $(this).data('group') +'"]')
    //get all their parent divs
    .closest('div')
    //find their nested videos
    .find('video')
    //play each of them
    .each(function(){ this.play();   
                         });
      }); 
     }); 
   }); 
});//function closes

CSS

.truss_wizard,.projection_wizard,.pipe_drape_wizard{
      height: 50px;
      width: 200px;
      display: block;
      background-color: #7ac810;
  font-size: 15;
}

span {
  font-color: yellow;
  font-size: 30px;
}

.video {
 margin-bottom: 100px;
}

Note: I am using a wrapper because I am inserting this in wordpress with a page built with visual composer

Upvotes: 1

Views: 1067

Answers (1)

Taplar
Taplar

Reputation: 24965

jQuery(function($) {
  //change the elements so they have a class and you can find multiple
  $(".play2").click(function() {
    //find all the play2 elements
    $(".play2")
      //get all their parent divs
      .closest('div')
      //find their nested videos
      .find('video')
        //play each of them
        .each(function(){ this.play(); });
  });
});

//making it more dynamic with a data attribute
//  <span class="square" data-group="play2">clickme2</span>

jQuery(function($) {
  //change the elements so they have a class and you can find multiple
  var $players = $('.square');
  
  $players.click(function() {
    //find all the play2 elements
    $players.filter('[data-group="'+ $(this).data('group') +'"]')
      //get all their parent divs
      .closest('div')
      //find their nested videos
      .find('video')
        //play each of them
        .each(function(){ this.play(); });
  });
});

Upvotes: 1

Related Questions