.quicktube {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    background: #f3f3f3;
    overflow: hidden;
}

/* Class applied when video is playing */
.quicktube--playing {}

.quicktube--paused {}

    .quicktube__iframe {
        border: none;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .quicktube__poster,
    .quicktube__video,
    .quicktube__iframe {
        position: absolute;
    }

    .quicktube__poster,
    .quicktube__video {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    /* Poster image */
    .quicktube__poster {
        cursor: pointer;
        transition: opacity .2s linear, bottom 0s linear 0s;
        overflow: hidden;
        background: #f3f3f3;
    }

    /* Class applied when poster image gets hidden */
    .quicktube__poster--hidden {
        opacity: 0;
        bottom: 100%;
        transition-delay: 0s, .1s;
    }

        .quicktube__poster--hidden .quicktube__play {
            display: none;
        }

        /* Optional img element inside posterframe */
        .quicktube__poster-image {
            display: block;
            max-width: 100%;
            height: auto;
        }

        @supports (object-fit: cover) {
            .quicktube__poster-image {
                min-height: 100%;
                min-width: 100%;
                object-fit: cover;
            }
        }

    /* The play button */
    .no-js .quicktube__btn {
        display: none;
    }