title: HTML5 video Uncaught TypeError: .play is not a function
body: <p>I have a problem with video autoplay after buttonc click which opens foundation modal with video to be played. When i click on button to open modal with video, it opens but video do not start playing.</p>
  
  <p><em>In console i get Uncaught TypeError: <strong>.play is not a function</strong> error</em></p>
  
  <p>Opening modal button:</p>
  
  <pre><code>&lt;div data-open="movieModal" id="movieModalOpenMedium"&gt;Open&lt;/div&gt;
  </code></pre>
  
  <p>Video modal:</p>
  
  <pre><code>&lt;div class="reveal full" id="movieModal" data-reveal data-reset-on-close="true"&gt;
  
  &lt;video id="company-movie" controls&gt;
      &lt;source src="/video/movie.mp4" type="video/mp4"&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p></p>
  
  <p>And script looks like:</p>
  
  <pre><code>$(document).ready(function(){
  // var movie = document.getElementById('company-movie');
  var movie = $('#company-movie').get(0);
  $('#movieModalOpenMedium').click(function(){
      movie.play();
  })
  </code></pre>
  
  <p>})</p>
  
  <p><strong>#company-movie</strong> element is seen correctly in DOM however i cannot play it in any way.</p>
  
  <p>I have tried with:</p>
  
  <ol>
  <li><p>$('#company-movie').play() - <strong>JQuery Object does not have play() method</strong> so for sure it will not work</p></li>
  <li><p>$('#company-movie').get(0).play();</p></li>
  <li>$('#company-movie')[0].play();</li>
  </ol>
  
  <p>but neither of these ways works.</p>
  
  <p>I was also trying to do this without jQuery this way:</p>
  
  <pre><code>    $(document).ready(function(){
  var movie = document.getElementById('company-movie');
  
  document.getElementById("movieModalOpenMedium").addEventListener("click", function(){
      movie.play();
  });
  </code></pre>
  
  <p>})</p>
  
  <p>but it also does not work.</p>
  
  <p>I would be grateful for any help with it.</p>