There are several videos on the page, made on / off video by clicking on the button or the video itself. If there are several videos on a page, only the first one turns on / off. I would like to get a universal function that will not work through the video ID (I would not like to have the same identifiers on the same page) and enable / disable only a specific video, respectively.

var video; window.onload = function() { video = document.getElementById("video"); } $(document).on('click', '.PlayPauseVideo', function() { if (video.paused) { video.play(); } else { video.pause(); } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="video_with_link"> <video id="video" width="380px" height="250px" src="video/videoplayback.mp4" class="PlayPauseVideo"></video> <input type="button" class="PlayPauseVideo"> </div> <div class="video_with_link"> <video id="video" width="380px" height="250px" src="video/videoplayback.mp4" class="PlayPauseVideo"></video> <input type="button" class="PlayPauseVideo"> </div> <script> </script>

    1 answer 1

    id="video" >> class="video"

     <div class="video_with_link"> <video class="video" width="380px" height="250px" src="video/videoplayback.mp4" class="PlayPauseVideo"></video> <input type="button" class="PlayPauseVideo"> </div> $(document).on('click','.PlayPauseVideo',function(){ var video = $(this).closest(".video_with_link").find(".video")[0]; if (video.paused) { video.play(); } else { video.pause(); } });