Vidéo qui change aléatoirement de position après lecture

-
Bonjour,
je suis débutante en javascript, je veux créer une page où serait jouée aléatoirement une playlist youtube dans un player, et qu'à chaque changement de vidéo, le player bouge également aléatoirement de position dans la page.
Pour l'instant, j'ai réussi à lancer un player aléatoire, mais je ne sais pas trop quelle démarche suivre ne serait-ce que pour que le player bouge aléatoirement à un refresh de la page. J'ai essayé de changer les propriétés de l'id de la div du player en javascript (avec le code ci-dessous) mais ça ne marche pas.
pos_x = Math.round(Math.random() * 400);
pos_y = Math.round(Math.random() * 400);

document.getElementById('player').style.left = pos_x;
document.getElementById('player').style.top = pos_y;


Mon code complet :
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function rotateYT() {
var videos = [
'8x0XPpBRKUQ',
'Q7b7YxxwVTI',
'-8TpZgrjDEo',
'ztXEZQTUl6M',
'SXKScxZlgr4',
'vVgbagF6ixk',
'qbGow83qysg',
'w_fZ13_6VOo',
'51qQfzJHyms',
'dWfiazwRkJs',
'-bri8bn227A',
'4HrAa5IjEHM',
'q7d-L0jvs_U',
'YypWJQJw-YQ',
'xyaJkQ7sLkc',
];

var index = Math.floor(Math.random() * videos.length);
return videos[index];
}

var player;
function onYouTubeIframeAPIReady() {
var videoID = rotateYT();
player = new YT.Player('player', {
height: '300',
width: '300',
videoId: videoID,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
var player =
document.getElementById('player')

pos_x = Math.round(Math.random() * 400);
pos_y = Math.round(Math.random() * 400);

document.getElementById('player').style.left = pos_x;
document.getElementById('player').style.top = pos_y;


function onPlayerReady(event) {
player.setPlaybackRate(1);
event.target.playVideo();
}

function onPlayerStateChange(event) {
if (event.data === 0) {
event.target.setShuffle(true);
event.target.loadVideoById(rotateYT());
event.target.playVideo();

}
}


et le html:
<!DOCTYPE html><html><head>
<script src="p5.js"></script>
<script src="p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<style>
#player {
margin-left: 20px;
}


</style>
</head>
<body>
<script src="sketch.js"></script>
<div id="player"></div>


</body></html>

Merci d'avance !
Afficher la suite