.ce-video {
    position: relative;
}
.ce-video__preview {
    position: absolute;
    width: 100%;
    height: 100%;
}
.ce-video__canvas {
    position: relative;
    background: rgba(224, 224, 224, 0.7);
}
.ce-video__canvas video, .ce-video__canvas iframe {
    position: absolute;
    width: 100%;
}
.ce-video__container {
    opacity: 0;
    transition: opacity 2s ease-in;
}
.ce-video__legal {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5px 10px;
    background: rgba(200, 200, 200, 0.6);
    transition: transform 0.5s ease-in-out;
    font-size: 0.75rem;
}
.ce-video__play {
    position: absolute;
    width: 4rem;
    height: 3rem;
    background-color: rgba(200, 200, 200, 0.6);
    top: 50%;
    left: 50%;
    margin-left: -2rem;
    margin-top: -1.5rem;
}
.ce-video__play:after {
    position: absolute;
    content: '';
    margin: 0 auto;
    top: 50%;
    margin-top: -1rem;
    left: 50%;
    margin-left: -0.9rem;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 1rem 0 1rem 2rem;
    border-color: transparent transparent transparent rgba(0, 0, 0, 0.75);
    transition: background-color 0.2s ease-in-out;
}
.ce-video__play:hover {
    background: rgba(200, 200, 200, 0.75);
}
.ce-video__play:hover:after {
    border-color: transparent transparent transparent rgba(0, 0, 0, 0.85);
}
.ce-video--initialized .ce-video__container {
    opacity: 1;
}
.ce-video--initialized .ce-video__legal {
    transform: scaleY(0);
    transform-origin: bottom;
    overflow: hidden;
}
.ce-video--initialized .ce-video__play {
    display: none;
}
.ce-video--loading .ce-video__play:after {
    height: 1.5rem;
    width: 2rem;
    border-width: 0;
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='24px' height='30px' viewBox='0 0 24 30' style='enable-background:new 0 0 50 50;' xml:space='preserve'%3E%3Crect x='0' y='10' width='4' height='10' fill='%23333' opacity='0.2'%3E%3Canimate attributeName='opacity' attributeType='XML' values='0.2; 1; .2' begin='0s' dur='0.6s' repeatCount='indefinite' /%3E%3Canimate attributeName='height' attributeType='XML' values='10; 20; 10' begin='0s' dur='0.6s' repeatCount='indefinite' /%3E%3Canimate attributeName='y' attributeType='XML' values='10; 5; 10' begin='0s' dur='0.6s' repeatCount='indefinite' /%3E%3C/rect%3E%3Crect x='8' y='10' width='4' height='10' fill='%23333' opacity='0.2'%3E%3Canimate attributeName='opacity' attributeType='XML' values='0.2; 1; .2' begin='0.15s' dur='0.6s' repeatCount='indefinite' /%3E%3Canimate attributeName='height' attributeType='XML' values='10; 20; 10' begin='0.15s' dur='0.6s' repeatCount='indefinite' /%3E%3Canimate attributeName='y' attributeType='XML' values='10; 5; 10' begin='0.15s' dur='0.6s' repeatCount='indefinite' /%3E%3C/rect%3E%3Crect x='16' y='10' width='4' height='10' fill='%23333' opacity='0.2'%3E%3Canimate attributeName='opacity' attributeType='XML' values='0.2; 1; .2' begin='0.3s' dur='0.6s' repeatCount='indefinite' /%3E%3Canimate attributeName='height' attributeType='XML' values='10; 20; 10' begin='0.3s' dur='0.6s' repeatCount='indefinite' /%3E%3Canimate attributeName='y' attributeType='XML' values='10; 5; 10' begin='0.3s' dur='0.6s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/svg%3E");
}