Randomized Video Backgrounds in Squarespace

I'd like everyone's input on ideas on how to improve the following code so as to have a randomized video background playing on a Squarespace site. The idea is so that when a visitor visits my page, they'd be introduced to a new, random video each time. The code I have below only lets me 1) upload the video to Vimeo for use on the website and 2) only allows for one video to be the background and not many or random videos. I'm not looking for anything super complex or intricate. Just a random video background, as simple as possible. I would like to continue to use Vimeo as a means to host the videos, if possible.

Your ideas on how I can accomplish this would be amazing.

PS: I can't take credit for the code, this code was a "Plugin" for Squarespace and thus generated this code for me.

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script>
$(function() {
// Video Plugin
$( ".sqs-slide-layer-content:eq(0)" ).append( $('.squarepluginsvideo') );
});
</script>
<script>
$(function() {
// Video Plugin
$( ".sqs-slide-layer-content:eq(0)" ).append( $('.videooverlay') );
});
</script>
<div style="display: none;">
<div class="videooverlay" style="height:100% !important; width:100% !important; top:0 !important; left:0 !important; position:absolute !important; background:#000 !important; opacity:0.0 !important;"></div>
<div class="squarepluginsvideo" style="background:#000 !important; width:100% !important; height:100% !important; overflow:hidden !important;">
<iframe class="splgvideoframe" src="https://player.vimeo.com/video/1039485?api=1&autoplay=1&loop=1&badge=0title=0&byline=0&portrait=0&background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="overflow: hidden; position: absolute; top: 50% !important; left: 50% !important; -webkit-transform: translate(-50%, -50%) !important; -ms-transform: translate(-50%, -50%) !important; -moz-transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%) !important; background:#111111 !important; box-sizing:content-box !important;"></iframe>
</div>
</div>
<script>
$(document).ready ( function(){
var divHeight = $('.sqs-slide:eq(0)').height();
var divWidth = $('.sqs-slide:eq(0)').width();
var aspHeight = divWidth / divHeight;

if(aspHeight < 1.7){
$('.splgvideoframe').height(1.15 * divHeight);
$('.splgvideoframe').width(2.1 * divHeight);
}
if(aspHeight > 1.7){
$('.splgvideoframe').height(0.7 * divWidth);
$('.splgvideoframe').width(1.3 * divWidth);
}
});
</script>
<script type="text/javascript">
window.onresize = resize;
function resize()
{
var divHeight = $('.sqs-slide:eq(0)').height();
var divWidth = $('.sqs-slide:eq(0)').width();
var aspHeight = divWidth / divHeight;if(aspHeight < 1.7){
$('.splgvideoframe').height(1.1 * divHeight);
$('.splgvideoframe').width(2 * divHeight);
}
if(aspHeight > 1.7){
$('.splgvideoframe').height(0.7 * divWidth);
$('.splgvideoframe').width(1.3 * divWidth);
}
}
</script>
<style>
.sqs-slice-gallery-item {overflow:hidden !important;}
video::-webkit-media-controls {display:none !important;}
.touch .squarepluginsvideo {display:none !important;}
.sqs-slice-play-button {display:none !important;}
@media (max-width:667px) {.squarepluginsvideo {display:none !important;}}
@media (max-width:667px) {.videooverlay {display:none !important;}}
.sqs-slice-gallery-item {pointer-events: none !important;}
</style>
<script>
document.documentElement.className += 
(("ontouchstart" in document.documentElement) ? ' touch' : ' no-touch');
</script>
<script>
var iframe = $('.splgvideoframe')[0],
player = $f(iframe),
status = $('.status'); player.addEvent('ready', function() {
player.api('setVolume', 0);
});
</script>