Skip to content

Instantly share code, notes, and snippets.

@HUrquhart
Last active January 23, 2019 11:24
Show Gist options
  • Save HUrquhart/64153b5d245630ba8ef4c594b31db0ae to your computer and use it in GitHub Desktop.
Save HUrquhart/64153b5d245630ba8ef4c594b31db0ae to your computer and use it in GitHub Desktop.
A simple script to randomize the starting point in an embedded video
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
function SaltyVideoSrcRandomiser(videoID, videoLength, minVideoStartSecond = 0){
// RNG
var Start = Math.floor((Math.random() * videoLength)+ minVideoStartSecond);
//convert to format (5m10s)
var tempminutes = Math.trunc( Start/60 ); // the minute part
var tempseconds = Start % 60; // returns the seconds part
return 'http://www.youtube.com/embed/' + videoID + '?=' + tempminutes + 'm' + tempseconds + 's&modestbranding=1&autoplay=1&controls=0&fs=0&loop=1&rel=0&showinfo=0&disablekb=1&playlist=' + videoID;
}
$(document).ready(function () {
$('#player').prop('width','1920px').prop('height','1080px').addClass('videoContainer__video').prop('src', SaltyVideoSrcRandomiser('SCgU5xUqG-w',4527));
});
</script>
<style>
body{
height: 100%;
margin: 100%
position: relative;
}
.videoContainer {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
iframe {
/* optional */
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="videoContainer">
<iframe id='player' class="videoContainer__video" width="1920" height="1080" src="" frameborder="0"></iframe>
</div>
</body>
</html>
@HUrquhart
Copy link
Author

Video length is in seconds

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment