.video-section {
    background: url(https://source.unsplash.com/Ow4ijRO4ZJw/1600x900);
    background-size:cover;
    height: 30em;
    display:flex;
    justify-content:center;
    align-items:center;
}
.modal-bg {
    position:fixed;
    top:0;
    left:0;
    z-index:900;
    background:rgba(0,0,0, .8);
    width: 100vw;
    height:100vh;
    backdrop-filter:blur(5px);
    overflow-y:scroll;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    transition:opacity 0.4s ease-in-out;
}
.modal {
    width:90vw;
    position:relative;
    /*padding-top: 56.25%;*/
    margin:2em 0;
    margin:auto;
}
.modal iframe {
    position:relative;
    top:0;
    left:0;
    border:none;
    width:100%;
    height:100%;
}
/*hide modal initially*/
.modal-bg {
    display:none;
    opacity:0;
}

.modal .btn--close {
  position: absolute;
  top: -40px;
  right: 15px;
  width: 10px;
  height: 10px;
  font-size: 0;
  line-height: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0 none;
  padding: 10px;
  cursor: pointer;
  background: none;
}
.modal .btn--close:before, .modal .btn--close:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 100%;
  height: 3px;
  background: white;
}
.modal .btn--close:before {
  transform: translateY(-50%) rotate(-45deg);
}
.modal .btn--close:after {
  transform: translateY(-50%) rotate(45deg);
}

/* responsive aspects */
@media screen and (min-width:200px) {
    .modal {
        padding-top:0;
        width: 100%;
        height: 300px;
    }
}
@media screen and (min-width:550px) {
    .modal {
        padding-top:0;
        width: 500px;
        height: 300px;
    }
}
@media screen and (min-width:900px) {
    .modal {
        padding-top:0;
        width: 1000px;
        height: 600px;
    }
}