<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<iframe src="https://open.spotify.com/embed/playlist/2VojZ70yfWaSeVfY2gjwVC?theme=0" width="100%" height="380" frameBorder="0" allowtransparency="true" allow="encrypted-media" style="align-iten:center;align-content:center;align-self:center;margin: 0;    position: absolute;    top: 50%;    left: 50%;    -ms-transform: translate(-50%, -50%);    transform: translate(-50%, -50%); "></iframe>
<video id="background-video" autoplay loop muted poster="https://assets.codepen.io/6093409/river.jpg">
  <source src="https://assets.codepen.io/6093409/river.mp4" type="video/mp4">
</video>


<h2>.</h2>
<h1>Listen To Music While You Browse?.</h1>
/* video background */
#background-video {
  height: 100vh;
  width: 100vw;
  object-fit: cover;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}

/* page content */
h1, h2 {
  color: white;
  font-family: Trebuchet MS;
  font-weight: bold;
  text-align: center;
}

h1 {
  font-size: 6rem;
  margin-top: 30vh; 
}

h2 { font-size: 3rem; }

@media (max-width: 750px) {
    #background-video { display: none; }
    body {
      background: url("https://assets.codepen.io/6093409/river.jpg") no-repeat;
      background-size: cover;
    }
}

iframe{
  border: 1px solid red;
  width:50%;
  display: flex;
  justify-content: center;
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.