@import '../../../assets/scss/variables.scss';
@import '../../../assets/scss/mixins.scss';

.youtube-player-wrapper {
  display: flex;
  justify-content: center;

  iframe {
    width: unquote('min(calc(((100vh - var(--header-height-md)) / 9) * 16), 100vw - var(--header-height-md))');
    height: unquote('min(calc(((100vw - var(--header-height-md)) / 16) * 9), 100vh - var(--header-height-md))');
    padding: 0;
    margin: auto;
  }
  @include mobile() {
    iframe {
      width: unquote('min(calc(((100vh) / 9) * 16), 100vw)');
      height: unquote('min(calc(((100vw) / 16) * 9), 100vh)');
    }
  }
  &.ended {
    iframe {
      width: unquote('min(calc(((50vh - var(--header-height-md)) / 9) * 16), 50vw - var(--header-height-md))');
      height: unquote('min(calc(((50vw - var(--header-height-md)) / 16) * 9), 50vh - var(--header-height-md))');
    }
    @include mobile() {
      iframe {
        width: unquote('min(calc(((50vh) / 9) * 16), 50vw)');
        height: unquote('min(calc(((50vw) / 16) * 9), 50vh)');
      }
    }
  }

  @include touch() {
    iframe {
      width: unquote('min(calc((100vh / 9) * 16), 100vw)');
      height: unquote('min(calc((100vw / 16) * 9), 100vh)');
    }
  }
}