.modal-wrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.7);
}
.modal-wrap.shown {
  display: flex;
}
.modal-panel {
  width: calc(100% - 40px);
  max-width: 820px;
  position: relative;
}
.modal-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.modal-frame iframe {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
.modal-close {
  position: absolute;
  right: 0;
  top: -40px;
}


@media only screen and ( max-width : 767px ) {
  .modal-panel {
    width: 100%;
  }
}