Html5 video won't start after pause in chrome

Question

I have a html5 video that will play in all browsers but when I pause it and then press play again in chrome it won't restart it just breaks. The only way to start the video again is to reload the page.

I am not sure what I am doing wrong. It works fine in IE and firefox. It is in a bootstrap modal so I am not sure if that affects it for some reason?

<div class="modal" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog modal-lg"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <div class="modal-content">
        <div class="modal-body">
            <video loop="loop" id="mainVideo" preload="none" controls width="100%">

                <source src="video/video-home.ogv" type="video/ogg">
                <source src="video/video-home.webm" type="video/webm">
                <source src="video/video-home.mp4" type="video/mp4">

            </video>


        </div>
</div>

I have looked at other threads and none of those have helped, for instance one of the threads said to set preload to none and that didn't work another said to reorder them and I have tried that but nothing has worked.

Thanks in advance :)

Answer 1

This seems to work (although i only tested it with an mp4 file)

Credit to ios-lizard for the jquery (note: use 2.1 +)

https://jsfiddle.net/RachGal/tc2pj553/

$("video").click(function(e) {

  // get click position 
  var clickY = (e.pageY - $(this).offset().top);
  var height = parseFloat($(this).height());

  // avoids interference with controls
  if (clickY > 0.82 * height) return;

  // toggles play / pause
  this.paused ? this.play() : this.pause();

});

video{width:270px;
      height:auto;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <div class="modal-content">
      <div class="modal-body">
        <video loop="loop" id="mainVideo" preload="none" controls width="100%">

          <source src="video/video-home.ogv" type="video/ogg">
            <source src="video/video-home.webm" type="video/webm">
              <source src="http://www.rachelgallen.com/nature.mp4" type="video/mp4">

        </video>


      </div>
    </div>