.slider {
    padding-bottom: 25%;
    -webkit-transition: padding 1s;
    transition: padding 1s;
    position: relative;
    overflow: hidden;
}

    .slider.video-playing {
        padding-bottom: 56.25%;
    }

    .slider a {
        position: absolute;
        left: 50%;
        top: 50%;
    }

.slides-par {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
    z-index: 1;
}

.play-icon {
    width: 80px;
    height: 80px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
    background-image: url('https://cdn3.iconfinder.com/data/icons/iconic-1/32/play_alt-512.png');
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
}

.slides {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    display: none;
}

#slide-0 {
    display: block;
}

.video-par {
    background-color: black;
    display: none;
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    padding-bottom: 56.25%;
    z-index: 2;
}

.slider.video-showing .video-par{
    display: block;
}
.slider.video-showing .play-icon{
    display: none;
}
.first-frame {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}