title: Video.JS: How do I add my own custom play and pause button in the middle of the video-container?
body: <p>For an assigment I need to make a site with a dark-mode, pop up modal, an accordion with multiple videos inside of them and the video players needs 3 custom buttons. To play, pause and to "check" that you finished the tutorial, which pops up the modal.</p>
  
  <p>How can I add my  buttons on the video-player and in the center? I cannot seem to get the  button (green button) correctly inside the video.js player itself. I thought that making the the video <code>position: relative</code> and the button <code>position absolute</code> would do the trick, but it still goes over the whole site instead of contained in the video itself</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#my-player {
      position: relative;
  }
  
  
  .video-button {
      position: absolute;
      padding: 20px;
      display: inline-block;
      top: 0%;
      left: 0%;
      
  }
  
  #video-play {
      background-color: green;
      
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://vjs.zencdn.net/7.5.4/video-js.css" rel="stylesheet"&gt;
  
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="accordion"&gt;
    &lt;h4&gt; 
       &lt;span&gt; &lt;i class="fas fa-caret-right rotate arrow"&gt;&lt;/i&gt; Algemene       introductie &lt;/span&gt;             
     &lt;/h4&gt;
                              
     &lt;div&gt;
       &lt;video id='my-player' class="video-js" controls data-setup='{"fluid": true}'&gt;
         &lt;source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"&gt;
         &lt;source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogv"&gt;
         &lt;source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm"&gt;
       &lt;/video&gt;
     &lt;a class="video-button" id="video-play"&gt;&gt;&lt;/a&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="https://vjs.zencdn.net/7.5.4/video.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>