RwoJNNZ

index.html

<div class="video-grid js-video-grid">
  <div class="video-container">
    <video  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" />
    
  </div>
    <div class="video-container">
    <video  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" />
    
  </div>
    <div class="video-container">
    <video  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" />
    
  </div>
    <div class="video-container">
    <video  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" />
    
  </div>
    <div class="video-container">
    <video  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" />
    
  </div>
</div>

rwojnnz.markdown

RwoJNNZ

A Pen by Ardeshir Eshghi on CodePen.

License.

script.js

const videoGrid = document.querySelector('.js-video-grid');

videoGrid.addEventListener('mouseover', (event) => {

 if ( event.target.closest('video')) {
   event.target.closest('video').play();
     console.log(event.target);
 } 
})

videoGrid.addEventListener('mouseout', (event) => {

 if ( event.target.closest('video')) {
    console.log('OUT', event.target);
      event.target.closest('video').pause();
 } 
});

style.css

.float-grid > * {
  float: left;
  width: 25%;
}

.float-grid:after {
  clear: both;
}

.box {
  height: 100px;
  position: relative;
  background: yellow;
  text-align: center;
}

/* .box > * {
   top: 50%;
  transform: translateY(-50%)   translateZ(0);
} */

.box--red {
  background-color: red;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-template-rows: auto;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

video {
  width: 100%    !important;
  height: auto   !important;
}