.videohp {
    width: 100%;
    cursor: pointer;
    position: relative;
    line-height: 0;

}
.video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}
/* YouTube iframe — class replaces the old #videoyoutube ID so multiple iframes work */
.videoyoutube {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}
.containerytembed {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 */
}
/* Click-through overlay for YouTube — class replaces old #linkembed */
.linkembed {
    position: absolute;
    height: 100%; width: 100%;
    cursor: pointer;
    z-index: 400;
}
.containerytembed .pause {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 500;
}
.containerytembed .play {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 500;
}
.videohpsound {
    position: absolute;
    left: 20px;
    bottom: 20px;
    top: auto;
    z-index: 600;
    background: transparent;
    display: block;
    max-width: 100px;

}
.videohpsoundon,
.videohpsoundoff {
    width: 50px;
}
.videohp .pause,
.containerytembed .pause {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
}
.videohp .play,
.containerytembed .play {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
}
@media (max-width: 768px) {
    .videohpsound {
        position: absolute;
        left: 5px;
        bottom: 10px;
        top: auto;
        z-index: 600;
        background: transparent;
        display: block;
        max-width: 40px;
    }
    .videohpsoundon,
    .videohpsoundoff {
        width: 30px;
    }
    .videohp .play,
    .videohp .pause,
    .containerytembed .play,
    .containerytembed .pause {
        width: 25px;
    }
}