title: How do I make a play button for my full page video?
body: <p>I am using fullpage.js in a project and I have been asked to place a play button for user friendliness. So I found a <a href="http://www.clker.com/cliparts/K/7/2/z/b/U/media-hi.png" rel="nofollow">nice button</a> to use and cannot figure out how to get it to appear over my video. I did however find an article here on how to play it on click. Here is my video section:</p>
  
  <pre><code>&lt;div class="section" id="section2"&gt;
      &lt;div id="container"&gt;
      &lt;video controls id="myVideo" preload controls&gt;
          &lt;source src="myvideo.mp4" type="video/mp4"&gt;
          &lt;source src="myvideo.webm" type="video/webm"&gt;
      &lt;/video&gt;
      &lt;div class="layer" style="text-align:center;"&gt;          
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the css that I am using:</p>
  
  <pre><code>#myVideo
      {
          position: absolute;
          right: 0;
          bottom: 0;
          top:0;
          right:0;
          width: 100%;
          height: 100%;
          z-index: 10;
          background-size: 100% 100%;
          background-color: black; 
          background-image: url('images/play.png'); /* does not show */
          background-position: center center;
          background-size: contain;
          object-fit: cover; 
      }
  </code></pre>
  
  <p>and here is my javascript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $('#fullpage').fullpage({
  
              afterRender: function () {
                  //playing the video
                  $('video').get(0).pause();
              }
          });
  
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>For clarification my HTML5 controls show but the grannies and grandpas need a large play button to help them out. </p>