Hide button on videojs play()?

Question

I have a play button inside of a video js video / container and I would like the button to hide(), when the video plays. It works if I just use $('.video-play-btn).hide() on the play function but the problem is I have numerous videos on the page so it is hiding them all, I only want the video that is being played for the button to hide.

html:

   <div class="col-lg-6">
        <video-js data-video-id="6563228568228"
                  data-embed="default"
                  data-application-id=""
                  class="video-js video-container--outer full-width"
                  controls
                  id=""
                  webkit-playsinline="true" playsinline="true"></video-js>
        <!-- play button -->
        <button class="video-play-btn btn"><i class="fa fa-play fa-play-video-inline"></i></button>
    </div>

jquery:

var videoPlayer = videojs('video-one');

 videoPlayer.on('play', function () {
        $(this).parent().find('.video-play-btn').hide();
    });

Answer 1

What you can do give the button id which is the video id with some prefix or suffix,on play function get the ID of video and embed suffix or prefix and hide that button. In the below example v_6563228568228 is video id and btn_v_6563228568228 is the button id that is same as video id with prefix of btn_ .This way you can provide unique id to your button.

Example.

<div class="col-lg-6">
          <video
    id="v_6563228568228"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="MY_VIDEO_POSTER.jpg"
    data-setup="{}"
  >
    <source src="https://mobamotion.mobatek.net/samples/sample-mp4-video.mp4" type="video/mp4" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>
  <button class="video-play-btn btn" id="btn_v_6563228568228"><i class="fa fa-play fa-play-video-inline"></button>
    </div>

  <script>
  var videoPlayer = videojs('v_6563228568228');

 videoPlayer.on('play', function () {
        vid_id = $(this).attr('id');
        $("#btn_"+vid_id).hide();
    });
  </script>