.video-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media only screen and (min-width: 640px) {
  .video-container {
    margin-bottom: 16px;
  }
}

.video-container > div {
  margin-bottom: 20px;
  width: 100%;
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  /* 16:9 アスペクト比 */
  height: 0;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

@media only screen and (max-width: 639px) {
  /* スマホもPCと同じ16:9 */
  .video-wrapper {
    padding-bottom: 56.25% !important;
  }
}