I wanted a function that could change my background everytime I reload the page, but it ain't working.
<script type="text/javascript">
var source = document.getElementById('video-source');
var videos = [
"videos/vid1.mp4",
"videos/vid2.mp4",
"videos/vid3.mp4"
];
var randomVideo = videos[Math.floor(Math.random() * 3)];
source.setAttribute('src', randomVideo);
</script>
Actually, it seems that the code run and update your video source in every page-refresh, but because the array is too small (although your random method gives a chance to each element) it might always pick one the same one
You can try to use arr[Math.floor(Math.random() * 10000) % arr.length] to pick random element from small arrays. If it doesn't work, add the line debugger; to the begining of your js and debug it step-by-step, that's how you can make sure that your code runs again whenever the page reloads.
If you want to make sure that the selected video will be different from previous one, you can use the code below to choose video url:
function selectRandomElement(arr) { //assume arr contains at least two elements
var res;
while((res = arr[Math.floor(Math.random() * 10000) % arr.length]) == localStorage['lastVideo']);
localStorage['lastVideo'] = res;
return res;
}