When you have a page full of Youtube videos, they will take a while to load and leave an empty space. To offer a better experience to your visitors, let's create a spinner (loading dots in this case) that will show if the video hasn't loaded yet and also give it a background color to make it clear that there will be something in that space.
Copy the code below and paste it into a Stylesheet inside Oxygen. It will automatically work for all videos added with Oxygen video module:
{
: (220 220 220 / 50%);
{
: 1;
}
{
: ;
(5: 50%;
: 50%;
: ;
: (-50%,-50%);
}
: (0, 0, 0, 0);
: 0 0 (0, 0, 0, 0), 0 0 (0, 0, 0, 0);
}
40% {
: ;
: 0 0 (0, 0, 0, 0), 0 0 (0, 0, 0, 0);
}
60% {
: 0 0 , 0 0 (0, 0, 0, 0);
}
80%,
100% {
: 0 0 , 0 0 ;
}
}
Result: