How to play video from parent div by clicking image (using jquery)

Question

When I click on the image below divwith the class videoCircle, the video in the previous video tag is played.

<div class="videoWrapper">
    <video class="video">
        <source src="videos/vidtut1.mp4"  type="video/mp4" />
    </video>
    <div class="videoCircle">
        <img src="img/circle-play.png" />
    </div>
</div>

I tried the following:

$(".videoCircle img").click(function(){
    $(this).prev().prev().paused ?$(this).prev().prev().play() : $(this).prev().prev().pause();
}); 

But this gives me an error:

Uncaught TypeError: $ (...). prev (...). prev (...). pause is not a function

Answer 1

You can use closest('.videoWrapper')to get the common parent, then find() video. Try the following:

$(".videoCircle img").click(function() {
    var video = $(this).closest('.videoWrapper').find('video')[0];
    video.paused ? video.play() : video.pause();
});

Note that you need to call the HTML5 video methods ( paused, playand pausein this example) in your own element video, and not in the jQuery object, therefore [0]after the selector.

Answer 2

$(".videoCircle img").click(function(){
   var video =  $(this).parent().parent().find($(".video")).get(0);
   console.log(video.paused);
});

js

Answer 3

.

Js

$(function(){
$(".videoCircle img").click(function(){
   var videoelement= $(this).parent().parent().find(".video").get(0);
     videoelement.play();
});
});

Js Fiddle Demo