.youtube-embed-js {
position: relative;
width: 100%;
}
.youtube-embed-js::before {
display: block;
padding-top: 56.25%;
content: "";
}
.youtube-embed-js > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.youtube-embed-js iframe{
background-color: var(--wp--preset--color--black);
}
.youtube-embed-js iframe + .youtube-embed-js-spinner{
display: block;
}
.youtube-embed-js-placeholder{
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
background-position: top;
background-size: cover;
background-repeat: no-repeat;
cursor: pointer;
}
.youtube-embed-js-placeholder svg{
position: absolute;
opacity: 1;
transition: opacity .5s ease-in-out;
top: 50%;
left: 50%;
max-height: 33.33%;
max-width: 33.33%;
transform: translate(-50%, -50%);
}
.youtube-embed-js-placeholder svg .tv-box{
fill: var(--wp--preset--color--black);
}
.youtube-embed-js-placeholder svg .play-arrow{
fill: var(--wp--preset--color--white);
}
.youtube-embed-js-placeholder:hover svg{
opacity: 0.33;
}
.youtube-embed-js-spinner{
display: none;
}
.youtube-embed-js-spinner-border{
color: var(--wp--preset--color--white);
position: absolute;
display: inline-block;
top: 50%;
left: 50%; height: 33.33%;
width: 18.75%;
margin: -9.37%  0 0 -9.37%;
border: 6px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation: 0.75s linear infinite rotate-360;
animation: 0.75s linear infinite rotate-360;
}
@-webkit-keyframes rotate-360 {
to {
transform: rotate(360deg);
}
}
@keyframes rotate-360 {
to {
transform: rotate(360deg);
}
}