video { object-fit: contain; box-sizing: border-box; max-height: 100%; max-width: 100%; } .video { background: #000; color: white; } .video-embedded { max-width: $width-page-constrained; max-height: $height-video-embedded; height: $height-video-embedded; video { height: 100%; } &.video--hidden { height: $height-video-embedded; } &.video--active { /*background: none;*/ } } .video__cover { text-align: center; height: 100%; width: 100%; background-size: auto 100%; background-position: center center; background-repeat: no-repeat; position: relative; &:hover { .video__play-button { @include absolute-center(); } } } .video__play-button { position: absolute; width: 100%; height: 100%; cursor: pointer; display: none; font-size: $spacing-vertical * 3; color: white; z-index: 1; background: $color-black-transparent; left: 0; top: 0; }