Trouble making a loading screen

Hey guys, I made this account a few months ago but I could never really get into it because I want to customize my profile.

For the life of me I cannot figure out the root cause of why I can't get a loading screen to work

This is the gif from the site flickr i uploaded myself that I want to use, but I can't get it to work

https://www.flickr.com/photos/201593968@N03/54056861217/in/dateposted-public/

I right click the gif and get the video address as shown below:

https://live.staticflickr.com/video/54056861217/35a6cbdde4/720p.mp4?s=eyJpIjo1NDA1Njg2MTIxNywiZSI6MTc0MDA3OTY3NywicyI6Ijg4OGU5OTQwNzllZDU2ZjljZjBlZWRjNGU4MjAyYTRlN2JhZjU4OGQiLCJ2IjoxfQ

I then look up a loading screen copy paste on the spacehey site like this one and replace the url of it with mine, but it doesn't work: 

<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url('https://live.staticflickr.com/video/54056861217/35a6cbdde4/720p.mp4?s=eyJpIjo1NDA1Njg2MTIxNywiZSI6MTc0MDA3OTY3NywicyI6Ijg4OGU5OTQwNzllZDU2ZjljZjBlZWRjNGU4MjAyYTRlN2JhZjU4OGQiLCJ2IjoxfQ');

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 5s ease 0s 1 normal forwards;

pointer-events: none;

}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

</style>

=====================

is there something I'm doing wrong? I just want to be apart of this community but I can't even make it paste step 1 of even customizing something on my profile, I hate having to simultaneously navigate outdated posts, youtube videos, and reddit threads to figure this out, help is greatly appreciated!