Particles + Plyr

index.html

<div class="wrapper">
  <canvas class="background"></canvas>
</div>

<div class="empty">
  <div id="container">
   <div class="vid">
     <video id="player">
     <source src="https://hw14.cdn.asset.aparat.com/aparat-video/5b48ea849185dc2e47f532387c17b29f13219888-720p__19987.mp4" type="video/mp4">
    </video>
    </div>
  </div>
</div>

particles-plyr.markdown

Particles + Plyr

A Pen by zack on CodePen.

License.

script.js

window.onload = function() {
  Particles.init({
    // normal options
    selector: ".background",
    maxParticles: 450,
    color: "#090979",
    // options for breakpoints
    responsive: [
      {
        breakpoint: 768,
        options: {
          maxParticles: 200,
          color: "#000000",
          connectParticles: false
        }
      },
      {
        breakpoint: 425,
        options: {
          maxParticles: 100,
          connectParticles: true
        }
      },
      {
        breakpoint: 320,
        options: {
          maxParticles: 0

          // disables particles.js
        }
      }
    ]
  });
};

const player = new Plyr('#player');

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js"></script>
<script src="https://cdn.plyr.io/3.4.7/plyr.js"></script>

style.css

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction:column;
  background: #fbffe9;
}
.background {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
background: linear-gradient(180deg, rgba(34,193,195,1) 0%, rgba(253,187,45,0) 100%);
  top: 0;
  left: 0;
  z-index: 0;
}

.wrapper{
  position: relative;
  width: 100vw;
  height: 50vh;
  margin: 0 auto;
}

.empty{
/*   background: pink; */
  height: 50vh;
  width: 99vw;
}

#container{
  width: 100%;
  height: 100%;
  display: flex;
}

.vid{
  width: 848px;
  height: 488px;
  margin: -200px auto;
  box-shadow: 0 40px 85px rgba(0,0,0,0.3);
  border-radius:10px;
}

styles

<link href="https://cdn.plyr.io/3.4.7/plyr.css" rel="stylesheet" />