index.html

<div id=a><iframe width="1280" height="720" src="https://www.youtube.com/embed/w0T-0Pt6iK8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<button onclick="xvel-=10">Left</button>
<button onclick="xvel-=-10">Right</button>
<button onclick="yvel-=10">Up</button>
<button onclick="yvel-=-10">Down</button>
<h1>You can also use wasd</h1>
<style>
    #a {
height:100px;
width:100px;
background:linear-gradient(45deg, yellow, gold, gold, black);
border:black solid;
border-radius:50%;
position:absolute;
animation:spin 5s infinite linear;
filter:sepia(0%);
}
    button {
background:black;
color:white;
border:indigo;
border-style:solid;
border-width:5px;
width:100px;
height:100px;
    }
    body {
overflow:hidden;
font-family:arial;
    }
    @keyframes spin {
        0%{transform:rotate(0deg);}
        100% {transform:rotate(359deg)}
}
</style>
<script>
var xthing = 0;
var ything = 0;
var xvel = 1;
var yvel = 0;
//x 561      y 534
setInterval(
function() {
document.onkeypress = function(event){
  if (event.key.toLowerCase()=="w") {
yvel-=5;
}
else   if (event.key.toLowerCase()=="a") {
xvel-=5;
}
else   if (event.key.toLowerCase()=="s") {
yvel-=-5;
}
else   if (event.key.toLowerCase()=="d") {
xvel-=-5;
}
    };
document.getElementById("a").style.top = ything + "px";

document.getElementById("a").style.left = xthing + "px";

xthing += xvel;

ything += yvel;
if (xvel>0) {xvel-=0.01}
if (xvel<0) {xvel+=0.01}
if (yvel<15) {yvel-=-0.1}
if (ything>screen.height) {yvel=yvel*-0.9; ything=screen.height;}
if (ything<0) {yvel=yvel*-0.9; ything=0;}
if (xthing>screen.width) {xvel=xvel*-0.9; xthing=screen.width;}
if (xthing<0) {xvel=xvel*-0.9; xthing=0;}

}, 10
);
</script>