.video { padding-bottom: 56.25%; position: relative; overflow: hidden; }

.video iframe,
.video .video__inner,
.video .video__placeholder { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }

.video .video__inner { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease; z-index: 2; }
.video .video__placeholder {background-image: url(http://futurepeoplemovie.com/assets/images/thumb-frozen-vials-trailer.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; z-index: 1; }

@media (max-width: 767px) {.video .video__placeholder {background-image: url(http://futurepeoplemovie.com/assets/images/thumb-frozen-vials-trailer-mob.jpg); background-repeat: no-repeat; background-position: center; background-size: contain; z-index: 1; } }

.video .play { position: absolute; left: 0%; top: 0%; right: 0; bottom: 0; z-index: 3; cursor: pointer; }

/* 2340x1080 pixels at 476ppi iPhone 12 Mini, iPhone 11 Pro, iPhone Xs, and iPhone X*/
@media only screen 
    and (device-width: 375px) 
    and (device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3) { .video .video__placeholder {background-image: url(http://futurepeoplemovie.com/assets/images/thumb-frozen-vials-trailer-mob.jpg); background-repeat: no-repeat; background-position: center; background-size: contain; z-index: 1; }}

/* 2532x1170 pixels at 460ppi iPhone 12 and iPhone 12 Pro*/
@media only screen 
    and (device-width: 390px) 
    and (device-height: 844px) 
    and (-webkit-device-pixel-ratio: 3) {.video .video__placeholder {background-image: url(http://futurepeoplemovie.com/assets/images/thumb-frozen-vials-trailer-mob.jpg); background-repeat: no-repeat; background-position: center; background-size: contain; z-index: 1; } }


/*  Video Playing  */

.video.is-playing .video__inner { opacity: 1; visibility: visible; }
.video.is-playing .play { opacity: 0; pointer-events: none; }