.imgit-youtube {
    position: relative;
    width: fit-content;
    user-select: none;
    overflow: hidden;
}

.imgit-youtube iframe,
.imgit-youtube object,
.imgit-youtube embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.imgit-youtube-poster {
    cursor: pointer;
}

.imgit-youtube-poster .imgit-picture {
    aspect-ratio: 16 / 9;
}

.imgit-youtube-poster img {
    width: 100%;
    height: 100%;
}

.imgit-youtube-poster::before {
    content: "";
    position: absolute;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
    height: 100px;
    width: 100%;
}

.imgit-youtube-play {
    width: 85px;
    height: 60px;
    position: absolute;
    top: calc(50% - 30px);
    left: calc(50% - 43px);
    z-index: 1;
    opacity: 0.75;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>') no-repeat center;
    filter: grayscale(50%);
    transition: filter .15s ease-out, opacity .15s ease-out;
}

.imgit-youtube-poster:hover .imgit-youtube-play {
    filter: grayscale(0%);
    opacity: 1;
}

.imgit-youtube-banner {
    width: 170px;
    height: 47px;
    position: absolute;
    bottom: 10px;
    left: 0;
    z-index: 2;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: white;
    background: rgba(23, 23, 23, .8);
    padding-left: 14px;
    border: none;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    transition: width .15s ease-out, padding-left .15s ease-out;
}

.imgit-youtube-banner::after {
    content: "";
    width: 72px;
    height: 16px;
    float: right;
    margin-left: 7px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 26" fill="white"><path d="M16.68.99c-3.13.04-9.66.17-11.69.69-1.49.4-2.59 1.6-2.99 3-.69 2.7-.68 8.31-.68 8.31S1.31 18.6 2 21.3c.39 1.5 1.59 2.6 2.99 3 2.69.7 13.4.68 13.4.68s10.7.01 13.4-.68c1.5-.4 2.59-1.6 2.99-3 .69-2.7.68-8.31.68-8.31s.11-5.61-.68-8.31c-.4-1.5-1.59-2.6-2.99-3C29.11.98 18.4.99 18.4.99s-.67-.01-1.71 0zm72.21.9v21.28h2.78l.31-1.37h.09c.3.5.71.88 1.21 1.18s1.08.4 1.68.4c1.1 0 1.99-.49 2.49-1.59s.81-2.7.81-4.9v-2.4c0-1.6-.11-2.9-.31-3.9-.2-.89-.5-1.59-1-2.09-.5-.4-1.1-.59-1.9-.59-.59 0-1.18.19-1.68.49-.49.3-1.01.8-1.21 1.4V1.9h-3.28zm-49.99.78l3.9 13.9.18 6.71h3.31v-6.71l3.87-13.9h-3.37l-1.4 6.31c-.4 1.89-.71 3.19-.81 3.99h-.09c-.2-1.1-.51-2.4-.81-3.99l-1.37-6.31h-3.4zm29.59 0v2.71h3.4v17.9h3.28V5.38h3.4s0-2.71-.09-2.71h-9.99zM15 7.79l8.9 5.18-8.9 5.09V7.78zm89.4.09c-1.7 0-2.89.59-3.59 1.59-.69.99-.99 2.6-.99 4.9v2.59c0 2.2.3 3.9.99 4.9.7 1.1 1.8 1.59 3.5 1.59 1.4 0 2.38-.3 3.18-1 .7-.7 1.09-1.69 1.09-3.09v-.5l-2.9-.21c0 1-.08 1.6-.28 2-.1.4-.5.62-1 .62-.3 0-.61-.11-.81-.31-.2-.3-.3-.59-.4-1.09s-.09-1.21-.09-2.21v-.78l5.71-.09v-2.62c0-1.6-.1-2.78-.4-3.68-.2-.89-.71-1.59-1.31-1.99-.7-.4-1.48-.59-2.68-.59zm-50.49.09c-1.09 0-2.01.18-2.71.68-.7.4-1.2 1.12-1.49 2.12-.3 1-.5 2.27-.5 3.87v2.21c0 1.5.1 2.78.4 3.78a3.49 3.49 0 0 0 1.4 2.12c.69.5 1.71.68 2.81.78 1.19 0 2.08-.28 2.78-.68.69-.4 1.09-1.09 1.49-2.09.39-1 .49-2.3.49-3.9v-2.21c0-1.6-.2-2.87-.49-3.87-.3-.89-.8-1.62-1.49-2.12-.7-.5-1.58-.68-2.68-.68zm12.18.09v11.9c-.1.3-.29.48-.59.68-.2.2-.51.31-.81.31s-.58-.1-.68-.4-.18-.7-.18-1.4V8.16h-3.4v11.21c0 1.4.18 2.39.68 3.09.49.7 1.21 1 2.21 1 1.4 0 2.48-.69 3.18-2.09h.09l.31 1.78h2.59V8.16s-3.4 0-3.4-.09zm17.31 0v11.9c-.1.3-.29.48-.59.68-.2.2-.51.31-.81.31s-.58-.1-.68-.4-.21-.7-.21-1.4V8.16h-3.4v11.21c0 1.4.21 2.39.71 3.09s1.18 1 2.18 1c1.39 0 2.51-.69 3.21-2.09h.09l.28 1.78h2.62V8.16s-3.4 0-3.4-.09zm20.9 2.09c.4 0 .58.11.78.31.2.3.3.59.4 1.09s.09 1.21.09 2.21v1.09h-2.5v-1.09c0-1 0-1.71.09-2.21 0-.4.11-.8.31-1 .2-.3.51-.4.81-.4zm-50.49.12c.5 0 .8.18 1 .68.19.5.28 1.3.28 2.4v4.68c0 1.1-.08 1.9-.28 2.4s-.5.68-1 .68-.79-.18-.99-.68-.31-1.3-.31-2.4v-4.68c0-1.1.11-1.9.31-2.4s.49-.68.99-.68zm39.68.09c.3 0 .61.1.81.4s.27.67.37 1.37c.1.6.12 1.51.12 2.71l.09 1.9c0 1.1 0 1.99-.09 2.59-.1.6-.19 1.08-.49 1.28-.2.3-.5.4-.9.4-.3 0-.51-.08-.81-.18-.2-.1-.39-.29-.59-.59v-8.5c.1-.4.29-.7.59-1s.6-.4.9-.4z"/></svg>') no-repeat center;
}

.imgit-youtube-banner:hover {
    width: 182px;
    padding-left: 20px;
}

.imgit-youtube-title {
    position: absolute;
    top: 10px;
    left: 14px;
    z-index: 1;
    color: white;
    font-size: 18px;
    pointer-events: none;
}

.imgit-youtube-loading .imgit-youtube-poster {
    cursor: default;
    pointer-events: none;
}

.imgit-youtube-loading .imgit-youtube-banner {
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity .5s ease-out, transform .4s;
}

.imgit-youtube-loading .imgit-youtube-play {
    opacity: 0.2 !important;
    transform: scale(10);
    transition: opacity .5s ease-out, transform .4s;
}

.imgit-youtube-playing .imgit-youtube-poster,
.imgit-youtube-playing .imgit-youtube-title {
    opacity: 0;
    transition: opacity .25s ease-out;
}