zhrjnnrdzjj

Укажи для video { display: block }

Можете реализовать двумя способами
1) Изучить язык, выбрать библиотеки, ознакомиться с документацией, сесть и написать
2) Пойти на фриланс с описанием задачи

Потому что вы её один раз вычисляете при запуске скрипта и больше нигде не меняете.

Должно быть примерно так:

function move(moveSpeed = 10) { 
    const ballTop = ball.getBoundingClientRect().top;

    if (ballTop > 0){
        ball.style.top = ballTop - moveSpeed + "px";
    };
};

Можно почитать здесь - linear gradient

.element {
    background: linear-gradient(to bottom, yellow 50%, red 50%);
}