.media {
    height: 0;
    position: relative;
    padding-bottom: 56.25%;
    background: #000;
}

.mediaplayer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*Search active media player*/
.layout.search ~ .layout .media {
    left: auto;
    position: fixed;
    z-index: 1;
    top: auto;
    bottom: 16px;
    right: 32px;
    width: 180px;
    height: 101px;
    padding-bottom: 0;
    cursor: pointer;
}
.layout.search ~ .layout .mediaplayer {
    pointer-events: none;
}

@media (max-width: 767px) and (orientation: portrait){
    .mediapage {
        padding-top: 56.25%;
    }
    .mediapage1 {

        padding-top: 5%;
    }
    .page--media--search-active .mediapage {
        padding-top: 0;
    }

    .media {
        position: fixed;
        z-index: 10;
        width: 100%;
        padding-bottom: 56.25%;
        top: 40px;
        left: 0;
    }
}

@media (max-width: 767px) and (orientation: landscape){
    .mediapage {
        padding-top: calc(100vh - 56px);
    }
    .page--media--search-active .mediapage {
        padding-top: 0;
    }

    .media {
        position: absolute;
        width: 100%;
        padding-bottom: 0;
        top: 40px;
        left: 0;
        height: calc(100vh - 40px);
        display: block;
    }
}

@media (min-width: 1180px) {
    .layout.search ~ .layout .media {
        bottom: auto;
        top: 76px;
        right: 16px;
        width: 380px;
        height: 214px;
    }
    
    .page--media .layout.search .layout__secondary {
        margin-top: 230px;
    }
}

@media (min-width: 1550px) {
    .layout.search ~ .layout .media {
        right: 127px;
    }
}