Strange behaviour on my js to play and show videos

Question

I'm getting an ugly "Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()" I'm trying to do a row with video cards. When the mouse enter on a card, the poster image disappears and a video will play. When the mouse leaves, the video should stop, or, if the mouse enters in a different card, then the current video playing stops and the hovered card video will play.

Sometimes I get the error above but I wasn't able to detect when exactly happens. Also, when the mouse hover, the poster image moves very awkward all around, how do I remove the borders on the video frames?. Below is the javascript I'm using

   var videostrip = (function () {
    var videos = []; 
    var currentVideoIndex = 0;
    var fullscreenAPISupported = false;
    var videoIdsInOrder = [];

     function init() {
       iniVideoButtons();
       if ('ontouchstart' in document) {
         $('body').removeClass('no-touch');
       }
     }

     function iniVideoButtons() {
       var currentHoverIndex = -1;
       var greyedOutClass = 'video-button--inactive';
       var $videoButtons = $('.video-button');
       var didTouchEvent = false;
       var touchOnEnter = false;

       $('body').on('touchstart', function() {
         didTouchEvent = true;
       });

       $videoButtons.on('mouseenter', function() {
         touchOnEnter = didTouchEvent;
         if (didTouchEvent) {
           didTouchEvent = false;
           return;
         }
         var index = $(this).data('index');

         if (index !== currentHoverIndex) {
           currentHoverIndex = index;

           var video = $(this).children('.video-button__video')[0];
           $(video).css('display', 'block');
           if (video.currentTime != 0) video.currentTime = 0;

          $(this).children('.video-button__image').css('opacity', 0);
          video.play();
         }
       });

       $videoButtons.on('mouseleave', function() {
         if (touchOnEnter) {
           touchOnEnter = false;
           return;
         }

         var index = $(this).data('index');
         if (index === currentHoverIndex) {
           currentHoverIndex = -1;
         }

         var video = $(this).children('.video-button__video')[0];
         video.pause();

         $(this).children('.video-button__image').css('opacity', 1);
       });
     }
     return {
       init: init
     };
    })();
    $(document).ready(videostrip.init);
    

#no-gutters {
    margin-right: 0;
    margin-left: 0;

    & > [class^="col-"],
    & > [class*=" col-"] {
      padding-right: 0;
      padding-left: 0;
  }
}
#video-thumbs {
   position: relative;
   top: 840px;
   background-color: #000;
   overflow: hidden;
   width: 100%;
   z-index: 100;
   text-align: center;
   margin:0 auto;
 }


#video-button {
   background: transparent;
   border: 0;
   cursor: pointer;
   outline: 0;
   padding: 0;
   display: block;
   float: left;
   height: 0;
   overflow: hidden;
   text-align: center;
   position: relative;
   -webkit-transition: opacity .3s;
   transition: opacity .3s;
   width: 100%;
   &:hover {
     inner-box {
     opacity: 0;
     transition: opacity .5s;
     }
  }
 }

#video-button__video {
   display: none ;
   left: 0;
   position: relative;
   width: 100%;
   height: auto !important;
 }

.video-button__image {
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
 }
.inner-box {
   background: green !important;
   opacity: .5;
   height:55%;
   width:100%;
   top: 0;
   left: 0;
   position: absolute;
   transition: opacity .5s;
}





.video-button--inactive {
   opacity: .4;
  // height:50% !important;
 }

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- Video Section-->
<section id="videos" class="video-thumbs">
  <div class="container-full">
    <div class="row no-gutters">
      <div class="col-xs-4">
        <button data-index="0" data-section="Corporate" class="video-button">
          <video preload="none" poster="https://preview.ibb.co/ejOpo5/mandesk_2x.jpg" loop="" style="display: block;" class="video-button__video">
            <source src="https://coverr.co/s3/mp4/Lonely-Blue.mp4" type="video/mp4"/>
    
          </video>                    <img src="https://preview.ibb.co/ejOpo5/mandesk_2x.jpg" class="video-button__image"/>
        </button>
      </div>
      <div class="col-xs-4">
        <button data-index="1" data-section="Academy" class="video-button">
          <video preload="none" poster="https://preview.ibb.co/ejOpo5/mandesk_2x.jpg" loop="" style="display: block;" class="video-button__video">
            <source src="https://coverr.co/s3/mp4/Lonely-Blue.mp4" type="video/mp4"/>
          </video>   <img src="https://preview.ibb.co/ejOpo5/mandesk_2x.jpg" class="video-button__image"/>
        </button>
      </div>
      <div class="col-xs-4">
        <button data-index="2" data-section="Business" class="video-button">
          <video preload="none" poster="https://preview.ibb.co/ejOpo5/mandesk_2x.jpg" loop="" style="display: block;" class="video-button__video">
            <source src="https://coverr.co/s3/mp4/Lonely-Blue.mp4" type="video/mp4"/>
       
          </video>   <img src="https://preview.ibb.co/ejOpo5/mandesk_2x.jpg" class="video-button__image"/>
        </button>
      </div>
    </div>
  </div>
</section>