video.live-video {
    position: fixed;
    z-index: 12;
    left: 5%;
    top: 5%;
    width: 25%;
    height: auto;
    transition:
        width ease-in-out 1s,
        height ease-in-out 1s,
        border 1s ease 1s,
        box-shadow 1s ease 1s;
    border: 3px solid #888 !important;
    box-shadow: 3px 3px 3px #000;
}

/* show the video element only if the stream if active */
video.live-video:not([data-enabled]) {
    display: none;
}

video.live-video.big {
    width: 90%;
    max-height: 90%;
    border: 3px solid transparent !important;
    box-shadow: 3px 3px 3px transparent !important;
    transition:
        width ease-in-out 2s,
        height ease-in-out 2s,
        border 0s,
        box-shadow 0s;
}

video.live-video.small {
    width: 15%;
    max-height: 25%;
}

video.live-video.top-right {
    right: 5%;
    top: 5%;
    left: auto;
    bottom: auto;
}

video.live-video.top-left {
    left: 5%;
    top: 5%;
    right: auto;
    bottom: auto;
}

video.live-video.bottom-right {
    right: 5%;
    bottom: 5%;
    left: auto;
    top: auto;
}

video.live-video.bottom-left {
    left: 5%;
    bottom: 5%;
    right: auto;
    top: auto;
}