some css changes to w0bmcustom.css and glitch.css, some changes in irc.blade.php regarding the visibility of the page for non logged in users, some minor changes to the upload page and a big change to the video page by adding the first interactive upload with loops to w0bm

public/css/glitch.css

@@ -546,7 +546,7 @@ table.table.table-hover.table-condensed {
     padding: 5px;
     border: 1px solid black;
     border-radius: 5px;
-    background: linear-gradient(to top, #0a0a0aa3 0%, #163f42a6 100%);
+    background: linear-gradient(to top, #0a0a0aa3 0%, #54062726 100%);
 }
 
 .profilheader {
@@ -1088,3 +1088,14 @@ div#tag-display {
 .nav>li.addtagsy>a:hover {
     color: #00fbff;
 }
+
+/* Admin shizzle */
+a.sirx, a[href="https://w0bm.com/user/sirx"] {
+    color: #ff0099 !important;
+    text-transform: uppercase;
+    text-shadow: 1px 1px 2px #ff00c8, 0px -2px 0px black, 2px 0px #6eff00;
+    font-family: vcr;
+    vertical-align: middle;
+    padding-right: 5px;
+    padding-left: 5px;
+}

public/css/w0bmcustom.css

@@ -4040,3 +4040,15 @@ repeating-radial-gradient(black, transparent 100px)
   width: 100%;
   min-height: 70vh;
 }
+
+/* fancy admin shizzle */
+.sirx {
+    color: #ff0099 !important;
+    text-transform: uppercase;
+    text-shadow: 1px 1px 2px #ff00c8, 0px -2px 0px black, 2px 0px #6eff00;
+    font-family: vcr;
+    padding-right: 0px;
+    padding-left: 0px;
+    font-size: 17px;
+    vertical-align: middle;
+}

public/loop/VideoLoop.js

@@ -0,0 +1,134 @@
+//
+//	VideoLoop.js - Provides (almost) seamless video looping and overcomes HTML 5 video loop attribute pause
+//	By Mark Westguard (http://www.westguardsolutions.com)
+//
+
+function VideoLoop(id) {
+
+	var about = {
+
+		Version: 0.1,
+		Author: "Mark Westguard",
+		Created: "09/01/2015",
+		Updated: "09/02/2015"
+	};
+
+	if(id) {
+
+		if(window === this) { return new VideoLoop(id); }
+
+		// Configuration
+		this.length = 1000;			// Precise (as you can) length of video in milliseconds
+		this.zIndex = 10000;		// Z-Index of video (z-index of +1 and -1 this value will also be used)
+		this.transitionDelay = 0;	// Video transition delay
+		this.paths = [];
+		this.types = [];
+
+		// Variables
+		this.id = id;
+		this.idCurrent = 1;			// Current video playing
+		this.step = 0;				// Loading step
+
+		return this;
+
+	} else {
+
+		return about;
+	}
+}
+
+VideoLoop.prototype = {
+
+	// Initialize
+	init: function() {
+
+		// Create 2 videos
+		for(var i=1; i<=2; i++) {
+
+			this.create(document.getElementById(this.id), this.id, i);
+		}
+	},
+
+	// Check if all checks are complete
+	check: function(obj, id) {
+
+		// Increment video steps
+		obj.step++;
+
+		// When all four conditions are met, start playing video 1
+		if(obj.step == 4) { document.getElementById(id + '1').play(); }
+	},
+
+	play: function(id) {
+
+		// Work out alternate video object
+		this.idCurrent = (((this.idCurrent - 2) * -1) + 1);
+		var idCurrentAlt = (((this.idCurrent - 2) * -1) + 1);
+
+		// Work out video objects
+		obj1 = document.getElementById(id + this.idCurrent);
+		obj2 = document.getElementById(id + idCurrentAlt);
+
+		// Play video (But do not show it yet)
+		obj1.play();
+
+		// ... then after transition delay ...
+		_self = this;
+		setTimeout(function() {
+
+			// Video transition
+			obj2.style.zIndex = _self.zIndex - 1;		// Move alt video to position -1 (Behind video 1)
+			obj1.style.zIndex = _self.zIndex + 1;		// Move video to position 1
+			obj2.style.zIndex = _self.zIndex;			// Move alt video to position 0 ready for next transition
+
+			// Set up video 2 ready to play
+			obj2.pause();
+			obj2.currentTime = 0;
+
+		}, this.transitionDelay);
+	},
+
+	create: function(obj, id, index) {
+
+		// Create video object
+		var videoObj = document.createElement('video');
+		videoObj.id = id + index;
+
+		// Create video source(s)
+		for(var i=0; i<this.paths.length; i++) {
+
+			var videoObjSource = document.createElement('source');
+			videoObjSource.src = this.paths[i];
+			videoObjSource.type = this.types[i];
+			videoObj.appendChild(videoObjSource);
+		}
+
+		// On can play through event handler
+		videoObj.oncanplaythrough = this.check(this, id);		// Video step
+
+		// Loaded meta data event handler
+		videoObj.loadedmetadata = this.check(this, id);		// Video step
+
+		// Video playing event handlers
+		videoObj.videoLoopSelf = this;
+		videoObj.videoLoopID = id;
+		videoObj.addEventListener('playing', function(evt) {
+
+			_self = evt.target.videoLoopSelf;
+			id = evt.target.videoLoopID;
+
+			setTimeout(function() {
+
+				_self.play(id);
+
+			}, _self.length);
+
+		}, false);
+
+		// Set initial z-index
+		videoObj.style.zIndex = this.zIndex + (2 - index);
+
+		// Append video to videoloop object
+		obj.appendChild(videoObj);
+	}
+};

public/loop/flowering_nights/VideoLoop.js

@@ -0,0 +1,134 @@
+//
+//	VideoLoop.js - Provides (almost) seamless video looping and overcomes HTML 5 video loop attribute pause
+//	By Mark Westguard (http://www.westguardsolutions.com)
+//
+
+function VideoLoop(id) {
+
+	var about = {
+
+		Version: 0.1,
+		Author: "Mark Westguard",
+		Created: "09/01/2015",
+		Updated: "09/02/2015"
+	};
+
+	if(id) {
+
+		if(window === this) { return new VideoLoop(id); }
+
+		// Configuration
+		this.length = 1000;			// Precise (as you can) length of video in milliseconds
+		this.zIndex = 10000;		// Z-Index of video (z-index of +1 and -1 this value will also be used)
+		this.transitionDelay = 0;	// Video transition delay
+		this.paths = [];
+		this.types = [];
+
+		// Variables
+		this.id = id;
+		this.idCurrent = 1;			// Current video playing
+		this.step = 0;				// Loading step
+
+		return this;
+
+	} else {
+
+		return about;
+	}
+}
+
+VideoLoop.prototype = {
+
+	// Initialize
+	init: function() {
+
+		// Create 2 videos
+		for(var i=1; i<=2; i++) {
+
+			this.create(document.getElementById(this.id), this.id, i);
+		}
+	},
+
+	// Check if all checks are complete
+	check: function(obj, id) {
+
+		// Increment video steps
+		obj.step++;
+
+		// When all four conditions are met, start playing video 1
+		if(obj.step == 4) { document.getElementById(id + '1').play(); }
+	},
+
+	play: function(id) {
+
+		// Work out alternate video object
+		this.idCurrent = (((this.idCurrent - 2) * -1) + 1);
+		var idCurrentAlt = (((this.idCurrent - 2) * -1) + 1);
+
+		// Work out video objects
+		obj1 = document.getElementById(id + this.idCurrent);
+		obj2 = document.getElementById(id + idCurrentAlt);
+
+		// Play video (But do not show it yet)
+		obj1.play();
+
+		// ... then after transition delay ...
+		_self = this;
+		setTimeout(function() {
+
+			// Video transition
+			obj2.style.zIndex = _self.zIndex - 1;		// Move alt video to position -1 (Behind video 1)
+			obj1.style.zIndex = _self.zIndex + 1;		// Move video to position 1
+			obj2.style.zIndex = _self.zIndex;			// Move alt video to position 0 ready for next transition
+
+			// Set up video 2 ready to play
+			obj2.pause();
+			obj2.currentTime = 0;
+
+		}, this.transitionDelay);
+	},
+
+	create: function(obj, id, index) {
+
+		// Create video object
+		var videoObj = document.createElement('video');
+		videoObj.id = id + index;
+
+		// Create video source(s)
+		for(var i=0; i<this.paths.length; i++) {
+
+			var videoObjSource = document.createElement('source');
+			videoObjSource.src = this.paths[i];
+			videoObjSource.type = this.types[i];
+			videoObj.appendChild(videoObjSource);
+		}
+
+		// On can play through event handler
+		videoObj.oncanplaythrough = this.check(this, id);		// Video step
+
+		// Loaded meta data event handler
+		videoObj.loadedmetadata = this.check(this, id);		// Video step
+
+		// Video playing event handlers
+		videoObj.videoLoopSelf = this;
+		videoObj.videoLoopID = id;
+		videoObj.addEventListener('playing', function(evt) {
+
+			_self = evt.target.videoLoopSelf;
+			id = evt.target.videoLoopID;
+
+			setTimeout(function() {
+
+				_self.play(id);
+
+			}, _self.length);
+
+		}, false);
+
+		// Set initial z-index
+		videoObj.style.zIndex = this.zIndex + (2 - index);
+
+		// Append video to videoloop object
+		obj.appendChild(videoObj);
+	}
+};

public/loop/flowering_nights/index.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Blühende Nacht seamless html5 loop</title>
+<link rel="stylesheet" href="style.css"></link>
+<meta charset="UTF-8">
+</head>
+
+<body>
+
+<div class="source_info">
+    <a href="../index.html"> <- back</a>
+    <span id="sinfo">Babbe Music – Blühende Nacht</span>
+    <input id="volume" type="range" min="-1" max="0.1" step="0.01" value="-0.8"/>
+</div>
+<div id="myVideoLoop">
+</div>
+<!-- <div id="html5canloop">
+<p>Seamless loop of audio and video using html5</p>
+<button onclick="change_css();">Reveal the magic</button> <button id="hidden_default" onclick="change_css_back();">Unreveal the magic</button><br />
+</div> -->
+<!-- Scripts -->
+<script src="VideoLoop.js"></script>
+<script>
+
+        window.onload = function() {
+
+                // Initialize video loop
+                videoLoopObj = new VideoLoop('myVideoLoop');
+                videoLoopObj.length = 20000;
+                videoLoopObj.paths = ['nacht6.mp4'];
+                videoLoopObj.types = ['video/mp4'];
+                videoLoopObj.init();
+        }
+
+</script>
+
+<script src="yPXnf.js" type="text/javascript"></script>
+  <script>
+
+    loopify("nacht6.ogg",ready);
+
+    function ready(err,loop){
+      if (err) {
+        console.warn(err);
+      }
+
+        loop.play();
+    }
+
+  </script>
+
+    <script>
+        function change_css(){
+            document.getElementById('myVideoLoop1').style.cssText = 'position:relative;';
+	    document.getElementById('myVideoLoop2').style.cssText = 'position:relative;';
+	    document.getElementById('hidden_default').style.cssText = 'visibility: visible;'; 
+        }
+    </script>
+
+    <script>
+        function change_css_back(){
+            document.getElementById('myVideoLoop2').style.cssText = 'position:absolute; z-index: 10000;';
+            document.getElementById('myVideoLoop1').style.cssText = 'position:absolute; z-index: 10001;'; 
+	    document.getElementById('hidden_default').style.cssText = 'visibility: hidden;';
+        }
+    </script>
+
+</script>
+
+</body>
+</html>

public/loop/flowering_nights/style.css

@@ -0,0 +1,117 @@
+html, body {
+	width: 100%;
+	height: 100%;
+}
+
+* { 
+	margin: 0px; 
+	padding: 0px; 
+	overflow: hidden; 
+}
+
+body {
+	background: black;
+}
+
+#myVideoLoop video { 
+	position: absolute; 
+}
+
+div#myVideoLoop {
+	height: inherit;
+	display: flex;
+	justify-content: center;
+}
+
+div#html5canloop {
+    color: white;
+    position: absolute;
+    bottom: 0;
+    font-weight: bold;
+    padding: 10px;
+    background: #202020;
+}
+
+button#hidden_default {
+	visibility: hidden;
+}
+
+.source_info {
+    color: white;
+    width: inherit;
+    background: #0d0d0d;
+    position: fixed;
+    z-index: 1;
+    padding: 10px;
+}
+
+span#sinfo {
+    padding: 10px;
+    font-style: italic;
+    vertical-align: super;
+}
+
+  #myVideoLoop {
+    position: fixed;
+    top: 0; right: 0; bottom: 0; left: 0;
+    overflow: hidden;
+  }
+  #myVideoLoop > video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  @media (min-aspect-ratio: 16/9) {
+    #myVideoLoop > video { height: 300%; top: -100%; }
+  }
+  @media (max-aspect-ratio: 16/9) {
+    #myVideoLoop > video { width: 300%; left: -100%; }
+  }
+  @supports (object-fit: cover) {
+    #myVideoLoop > video {
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      object-fit: cover;
+    }
+  }
+
+input#volume {
+    vertical-align: sub;
+    margin-left: 10px;
+}
+
+/*******/
+input[type=range] {
+    height: 31px;
+    -webkit-appearance: none;
+    background: #0d0d0d;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 5px;
+    cursor: pointer;
+    background: #f51945;
+    border-radius: 4px;
+    border: 1px solid #f51945;
+}
+
+input[type=range]::-webkit-slider-thumb {
+    height: 20px;
+    width: 20px;
+    border-radius: 10px;
+    background: #1d1c1c;
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: -8.5px;
+    border: 2px solid white;
+    margin-left: 0px;
+}
+
+.source_info {
+    vertical-align: super;
+    display: flex;
+    align-items: center;
+}

public/loop/flowering_nights/yPXnf.js

@@ -0,0 +1,87 @@
+(function() {
+
+    function loopify(uri,cb) {
+
+      var context = new (window.AudioContext || window.webkitAudioContext)(),
+          request = new XMLHttpRequest();
+
+      request.responseType = "arraybuffer";
+      request.open("GET", uri, true);
+
+      // XHR failed
+      request.onerror = function() {
+        cb(new Error("Couldn't load audio from " + uri));
+      };
+
+      // XHR complete
+      request.onload = function() {
+        context.decodeAudioData(request.response,success,function(err){
+          // Audio was bad
+          cb(new Error("Couldn't decode audio from " + uri));
+        });
+      };
+
+      request.send();
+
+      function success(buffer) {
+
+        var source;
+
+        function play() {
+
+          // Stop if it's already playing
+          stop();
+
+          // Create a new source (can't replay an existing source)
+          source = context.createBufferSource();
+          source.connect(context.destination);
+
+		var gainNode = context.createGain();
+		gainNode.gain.value = -0.8;
+		gainNode.connect(context.destination);
+		source.connect(gainNode);	
+
+		document.getElementById('volume').addEventListener('change', function() {
+    		gainNode.gain.value = this.value;
+		});
+
+
+          // Set the buffer
+          source.buffer = buffer;
+          source.loop = true;
+
+          // Play it
+          source.start(0);
+
+        }
+
+        function stop() {
+
+          // Stop and clear if it's playing
+          if (source) {
+            source.stop();
+            source = null;
+          }
+
+        }
+
+        cb(null,{
+          play: play,
+          stop: stop
+        });
+
+      }
+
+    }
+
+    loopify.version = "0.1";
+
+    if (typeof define === "function" && define.amd) {
+      define(function() { return loopify; });
+    } else if (typeof module === "object" && module.exports) {
+      module.exports = loopify;
+    } else {
+      this.loopify = loopify;
+    }
+
+})();

public/loop/index.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+<style>
+@font-face { font-family: 'pixel';
+             src: url('fonts/chesstype.ttf') format('truetype'); }
+
+a {
+    font-family: 'pixel';
+    color: white;
+    text-decoration: none;
+    padding-left: 10px;
+}
+
+a::after {
+    content: " |";
+}
+
+a:hover {
+    color: #02d370;
+    text-decoration: underline;
+}
+
+* { margin: 0px; padding: 0px; overflow: hidden; }
+body {
+  background: url(z0r_60842.gif) no-repeat center center fixed; 
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+
+html, 
+body {
+    height: 100%;
+}
+
+p {
+    color: white;
+    position: absolute;
+    bottom: 0;
+    text-align: center;
+    width: 100%;
+}
+
+.info {
+    background: black;
+    padding: 5px;
+    text-align: center;
+    bottom: 0;
+    position: fixed;
+    width: 100%;
+}
+
+/******* Chrome specific */
+input[type=range] {
+    height: 31px;
+    -webkit-appearance: none;
+    background: transparent;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 5px;
+    cursor: pointer;
+    background: #f51945;
+    border-radius: 4px;
+    border: 1px solid #f51945;
+}
+
+input[type=range]::-webkit-slider-thumb {
+    height: 20px;
+    width: 20px;
+    border-radius: 10px;
+    background: #1d1c1c;
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: -8.5px;
+    border: 2px solid white;
+    margin-left: 0px;
+}
+
+input#volume {
+    margin-left: 5px;
+}
+</style>
+</head>
+<body>
+<div class="info">
+  <a href="/loop/flowering_nights/index.html">Blühende Nacht</a>
+  <a href="/loop/polizei/index.html">1, 2 Polizei</a>
+  <a href="/loop/shake/index.html">Shake your booty!</a>
+</div>
+<input id="volume" type="range" min="-1" max="0.1" step="0.01" value="-0.8"/>
+  
+<script src="loopify.js" type="text/javascript"></script>
+  <script>
+
+    loopify("z0r_60842_loop.flac",ready);
+
+    function ready(err,loop){
+
+      if (err) {
+        console.warn(err);
+      }
+
+        loop.play();
+    }
+
+  </script>
+</body>
+</html>

public/loop/loopify.js

@@ -0,0 +1,87 @@
+(function() {
+
+    function loopify(uri,cb) {
+
+      var context = new (window.AudioContext || window.webkitAudioContext)(),
+          request = new XMLHttpRequest();
+
+      request.responseType = "arraybuffer";
+      request.open("GET", uri, true);
+
+      // XHR failed
+      request.onerror = function() {
+        cb(new Error("Couldn't load audio from " + uri));
+      };
+
+      // XHR complete
+      request.onload = function() {
+        context.decodeAudioData(request.response,success,function(err){
+          // Audio was bad
+          cb(new Error("Couldn't decode audio from " + uri));
+        });
+      };
+
+      request.send();
+
+      function success(buffer) {
+
+        var source;
+
+        function play() {
+
+          // Stop if it's already playing
+          stop();
+
+          // Create a new source (can't replay an existing source)
+          source = context.createBufferSource();
+          source.connect(context.destination);
+
+    var gainNode = context.createGain();
+    gainNode.gain.value = -0.8;
+    gainNode.connect(context.destination);
+    source.connect(gainNode); 
+
+    document.getElementById('volume').addEventListener('change', function() {
+        gainNode.gain.value = this.value;
+    });
+
+
+          // Set the buffer
+          source.buffer = buffer;
+          source.loop = true;
+
+          // Play it
+          source.start(0);
+
+        }
+
+        function stop() {
+
+          // Stop and clear if it's playing
+          if (source) {
+            source.stop();
+            source = null;
+          }
+
+        }
+
+        cb(null,{
+          play: play,
+          stop: stop
+        });
+
+      }
+
+    }
+
+    loopify.version = "0.1";
+
+    if (typeof define === "function" && define.amd) {
+      define(function() { return loopify; });
+    } else if (typeof module === "object" && module.exports) {
+      module.exports = loopify;
+    } else {
+      this.loopify = loopify;
+    }
+
+})();

public/loop/polizei/alt/VideoLoop.js

@@ -0,0 +1,133 @@
+//
+//	VideoLoop.js - Provides (almost) seamless video looping and overcomes HTML 5 video loop attribute pause
+//	By Mark Westguard (http://www.westguardsolutions.com)
+//
+
+function VideoLoop(id) {
+
+	var about = {
+
+		Version: 0.1,
+		Author: "Mark Westguard",
+		Created: "09/01/2015",
+		Updated: "09/02/2015"
+	};
+
+	if(id) {
+
+		if(window === this) { return new VideoLoop(id); }
+
+		// Configuration
+		this.length = 1000;			// Precise (as you can) length of video in milliseconds
+		this.zIndex = 10000;		// Z-Index of video (z-index of +1 and -1 this value will also be used)
+		this.transitionDelay = 0;	// Video transition delay
+		this.paths = [];
+		this.types = [];
+		// Variables
+		this.id = id;
+		this.idCurrent = 1;			// Current video playing
+		this.step = 0;				// Loading step
+		return this;
+
+	} else {
+
+		return about;
+	}
+}
+
+VideoLoop.prototype = {
+
+	// Initialize
+	init: function() {
+
+		// Create 2 videos
+		for(var i=1; i<=2; i++) {
+
+			this.create(document.getElementById(this.id), this.id, i);
+		}
+	},
+
+	// Check if all checks are complete
+	check: function(obj, id) {
+
+		// Increment video steps
+		obj.step++;
+
+		// When all four conditions are met, start playing video 1
+		if(obj.step == 4) { document.getElementById(id + '1').play(); }
+	},
+
+	play: function(id) {
+
+		// Work out alternate video object
+		this.idCurrent = (((this.idCurrent - 2) * -1) + 1);
+		var idCurrentAlt = (((this.idCurrent - 2) * -1) + 1);
+
+		// Work out video objects
+		obj1 = document.getElementById(id + this.idCurrent);
+		obj2 = document.getElementById(id + idCurrentAlt);
+
+		// Play video (But do not show it yet)
+		obj1.play();
+
+		// ... then after transition delay ...
+		_self = this;
+		setTimeout(function() {
+
+			// Video transition
+			obj2.style.zIndex = _self.zIndex - 1;		// Move alt video to position -1 (Behind video 1)
+			obj1.style.zIndex = _self.zIndex + 1;		// Move video to position 1
+			obj2.style.zIndex = _self.zIndex;			// Move alt video to position 0 ready for next transition
+
+			// Set up video 2 ready to play
+			obj2.pause();
+			obj2.currentTime = 0;
+
+		}, this.transitionDelay);
+	},
+
+	create: function(obj, id, index) {
+
+		// Create video object
+		var videoObj = document.createElement('video');
+		videoObj.setAttribute("muted" , "true");
+		videoObj.setAttribute("preload" , "auto");
+		videoObj.id = id + index;
+		// Create video source(s)
+		for(var i=0; i<this.paths.length; i++) {
+			
+			var videoObjSource = document.createElement('source');
+			videoObjSource.src = this.paths[i];
+			videoObjSource.type = this.types[i];
+			videoObj.appendChild(videoObjSource);
+		}
+
+		// On can play through event handler
+		videoObj.oncanplaythrough = this.check(this, id);		// Video step
+
+		// Loaded meta data event handler
+		videoObj.loadedmetadata = this.check(this, id);		// Video step
+
+		// Video playing event handlers
+		videoObj.videoLoopSelf = this;
+		videoObj.videoLoopID = id;
+		videoObj.addEventListener('playing', function(evt) {
+
+			_self = evt.target.videoLoopSelf;
+			id = evt.target.videoLoopID;
+
+			setTimeout(function() {
+
+				_self.play(id);
+
+			}, _self.length);
+
+		}, false);
+
+		// Set initial z-index
+		videoObj.style.zIndex = this.zIndex + (2 - index);
+
+		// Append video to videoloop object
+		obj.appendChild(videoObj);
+	}
+};

public/loop/polizei/alt/index.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Blühende Nacht seamless html5 loop</title>
+<link rel="stylesheet" href="style.css"></link>
+<meta charset="UTF-8">
+</head>
+
+<body>
+
+<div class="source_info">
+    <a href="../index.html"> <- back</a>
+    <span id="sinfo">Eins Zwei Polizei</span>
+    <input id="volume" type="range" min="-1" max="0.1" step="0.01" value="-0.8"/>
+</div>
+<div id="myVideoLoop">
+</div>
+<!-- <div id="html5canloop">
+<p>Seamless loop of audio and video using html5</p>
+<button onclick="change_css();">Reveal the magic</button> <button id="hidden_default" onclick="change_css_back();">Unreveal the magic</button><br />
+</div> -->
+<!-- Scripts -->
+<script src="VideoLoop.js"></script>
+<script>
+
+        window.onload = function() {
+
+                // Initialize video loop
+                videoLoopObj = new VideoLoop('myVideoLoop');
+                videoLoopObj.length = 7351;
+    videoLoopObj.transitionDelay = 20;
+                videoLoopObj.paths = ['ihxtyu.mp4'];
+                videoLoopObj.types = ['video/mp4'];
+                videoLoopObj.init();
+        }
+
+</script>
+
+<script src="yPXnf.js" type="text/javascript"></script>
+  <script>
+
+    loopify("yutmul.flac",ready);
+
+    function ready(err,loop){
+      if (err) {
+        console.warn(err);
+      }
+
+        loop.play();
+    }
+
+  </script>
+
+    <script>
+        function change_css(){
+            document.getElementById('myVideoLoop1').style.cssText = 'position:relative;';
+      document.getElementById('myVideoLoop2').style.cssText = 'position:relative;';
+      document.getElementById('hidden_default').style.cssText = 'visibility: visible;'; 
+        }
+    </script>
+
+    <script>
+        function change_css_back(){
+            document.getElementById('myVideoLoop2').style.cssText = 'position:absolute; z-index: 10000;';
+            document.getElementById('myVideoLoop1').style.cssText = 'position:absolute; z-index: 10001;'; 
+      document.getElementById('hidden_default').style.cssText = 'visibility: hidden;';
+        }
+    </script>
+
+</script>
+
+</body>
+</html>

public/loop/polizei/alt/style.css

@@ -0,0 +1,117 @@
+html, body {
+	width: 100%;
+	height: 100%;
+}
+
+* { 
+	margin: 0px; 
+	padding: 0px; 
+	overflow: hidden; 
+}
+
+body {
+	background: black;
+}
+
+#myVideoLoop video { 
+	position: absolute; 
+}
+
+div#myVideoLoop {
+	height: inherit;
+	display: flex;
+	justify-content: center;
+}
+
+div#html5canloop {
+    color: white;
+    position: absolute;
+    bottom: 0;
+    font-weight: bold;
+    padding: 10px;
+    background: #202020;
+}
+
+button#hidden_default {
+	visibility: hidden;
+}
+
+.source_info {
+    color: white;
+    width: inherit;
+    background: #0d0d0d;
+    position: fixed;
+    z-index: 1;
+    padding: 10px;
+}
+
+span#sinfo {
+    padding: 10px;
+    font-style: italic;
+    vertical-align: super;
+}
+
+  #myVideoLoop {
+    position: fixed;
+    top: 0; right: 0; bottom: 0; left: 0;
+    overflow: hidden;
+  }
+  #myVideoLoop > video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  @media (min-aspect-ratio: 16/9) {
+    #myVideoLoop > video { height: 300%; top: -100%; }
+  }
+  @media (max-aspect-ratio: 16/9) {
+    #myVideoLoop > video { width: 300%; left: -100%; }
+  }
+  @supports (object-fit: cover) {
+    #myVideoLoop > video {
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      object-fit: contain;
+    }
+  }
+
+input#volume {
+    vertical-align: sub;
+    margin-left: 10px;
+}
+
+/*******/
+input[type=range] {
+    height: 31px;
+    -webkit-appearance: none;
+    background: #0d0d0d;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 5px;
+    cursor: pointer;
+    background: #f51945;
+    border-radius: 4px;
+    border: 1px solid #f51945;
+}
+
+input[type=range]::-webkit-slider-thumb {
+    height: 20px;
+    width: 20px;
+    border-radius: 10px;
+    background: #1d1c1c;
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: -8.5px;
+    border: 2px solid white;
+    margin-left: 0px;
+}
+
+.source_info {
+    vertical-align: super;
+    display: flex;
+    align-items: center;
+}

public/loop/polizei/alt/yPXnf.js

@@ -0,0 +1,87 @@
+(function() {
+
+    function loopify(uri,cb) {
+
+      var context = new (window.AudioContext || window.webkitAudioContext)(),
+          request = new XMLHttpRequest();
+
+      request.responseType = "arraybuffer";
+      request.open("GET", uri, true);
+
+      // XHR failed
+      request.onerror = function() {
+        cb(new Error("Couldn't load audio from " + uri));
+      };
+
+      // XHR complete
+      request.onload = function() {
+        context.decodeAudioData(request.response,success,function(err){
+          // Audio was bad
+          cb(new Error("Couldn't decode audio from " + uri));
+        });
+      };
+
+      request.send();
+
+      function success(buffer) {
+
+        var source;
+
+        function play() {
+
+          // Stop if it's already playing
+          stop();
+
+          // Create a new source (can't replay an existing source)
+          source = context.createBufferSource();
+          source.connect(context.destination);
+
+		var gainNode = context.createGain();
+		gainNode.gain.value = -0.8;
+		gainNode.connect(context.destination);
+		source.connect(gainNode);	
+
+		document.getElementById('volume').addEventListener('change', function() {
+    		gainNode.gain.value = this.value;
+		});
+
+
+          // Set the buffer
+          source.buffer = buffer;
+          source.loop = true;
+
+          // Play it
+          source.start(0);
+
+        }
+
+        function stop() {
+
+          // Stop and clear if it's playing
+          if (source) {
+            source.stop();
+            source = null;
+          }
+
+        }
+
+        cb(null,{
+          play: play,
+          stop: stop
+        });
+
+      }
+
+    }
+
+    loopify.version = "0.1";
+
+    if (typeof define === "function" && define.amd) {
+      define(function() { return loopify; });
+    } else if (typeof module === "object" && module.exports) {
+      module.exports = loopify;
+    } else {
+      this.loopify = loopify;
+    }
+
+})();

public/loop/polizei/index.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+<style>
+#myVideoLoop video {
+    position: absolute;
+    width: 100%;
+}
+
+  #myVideoLoop {
+    position: fixed;
+    top: 0; right: 0; bottom: 0; left: 0;
+    overflow: hidden;
+  }
+  #myVideoLoop > video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  @media (min-aspect-ratio: 16/9) {
+    #myVideoLoop > video { height: 300%; top: -100%; }
+  }
+  @media (max-aspect-ratio: 16/9) {
+    #myVideoLoop > video { width: 300%; left: -100%; }
+  }
+  @supports (object-fit: cover) {
+    #myVideoLoop > video {
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  .source_info {
+    position: absolute;
+    z-index: 99999;
+  }
+</style>
+<script src="videoloop.js"></script>
+</head>
+<body>
+    <div class="source_info">
+    <a href="../index.html"> <- back</a>
+</div>
+<div id="myVideoLoop"></div>
+<script>
+
+    window.onload = function() {
+
+        // Initialize video loop
+        videoLoopObj = new VideoLoop('myVideoLoop');
+        videoLoopObj.transitionDelay = 90; // delay until the second video starts
+        videoLoopObj.length = 7290; // original lenght: 7400ms (07.40s)
+        videoLoopObj.paths = ['gfdgsgds.mp4'];
+        videoLoopObj.types = ['video/mp4'];
+        videoLoopObj.volume = 0.3;
+        videoLoopObj.init();
+    }
+
+</script>
+</body>
+</html>

public/loop/polizei/loopify.js

@@ -0,0 +1,77 @@
+(function() {
+
+    function loopify(uri,cb) {
+
+      var context = new (window.AudioContext || window.webkitAudioContext)(),
+          request = new XMLHttpRequest();
+
+      request.responseType = "arraybuffer";
+      request.open("GET", uri, true);
+
+      // XHR failed
+      request.onerror = function() {
+        cb(new Error("Couldn't load audio from " + uri));
+      };
+
+      // XHR complete
+      request.onload = function() {
+        context.decodeAudioData(request.response,success,function(err){
+          // Audio was bad
+          cb(new Error("Couldn't decode audio from " + uri));
+        });
+      };
+
+      request.send();
+
+      function success(buffer) {
+
+        var source;
+
+        function play() {
+
+          // Stop if it's already playing
+          stop();
+
+          // Create a new source (can't replay an existing source)
+          source = context.createBufferSource();
+          source.connect(context.destination);
+
+          // Set the buffer
+          source.buffer = buffer;
+          source.loop = true;
+
+          // Play it
+          source.start(0);
+
+        }
+
+        function stop() {
+
+          // Stop and clear if it's playing
+          if (source) {
+            source.stop();
+            source = null;
+          }
+
+        }
+
+        cb(null,{
+          play: play,
+          stop: stop
+        });
+
+      }
+
+    }
+
+    loopify.version = "0.1";
+
+    if (typeof define === "function" && define.amd) {
+      define(function() { return loopify; });
+    } else if (typeof module === "object" && module.exports) {
+      module.exports = loopify;
+    } else {
+      this.loopify = loopify;
+    }
+
+})();

public/loop/polizei/videoloop.js

@@ -0,0 +1,135 @@
+//
+//	VideoLoop.js - Provides (almost) seamless video looping and overcomes HTML 5 video loop attribute pause
+//	By Mark Westguard (http://www.westguardsolutions.com)
+//
+
+function VideoLoop(id) {
+
+	var about = {
+
+		Version: 0.1,
+		Author: "Mark Westguard",
+		Created: "09/01/2015",
+		Updated: "09/02/2015"
+	};
+
+	if(id) {
+
+		if(window === this) { return new VideoLoop(id); }
+
+		// Configuration
+		this.length = 1000;			// Precise (as you can) length of video in milliseconds
+		this.zIndex = 10000;		// Z-Index of video (z-index of +1 and -1 this value will also be used)
+		this.transitionDelay = 500;	// Video transition delay
+		this.paths = [];
+		this.types = [];
+
+		// Variables
+		this.id = id;
+		this.idCurrent = 1;			// Current video playing
+		this.step = 0;				// Loading step
+
+		return this;
+
+	} else {
+
+		return about;
+	}
+}
+
+VideoLoop.prototype = {
+
+	// Initialize
+	init: function() {
+
+		// Create 2 videos
+		for(var i=1; i<=2; i++) {
+
+			this.create(document.getElementById(this.id), this.id, i);
+		}
+	},
+
+	// Check if all checks are complete
+	check: function(obj, id) {
+
+		// Increment video steps
+		obj.step++;
+
+		// When all four conditions are met, start playing video 1
+		if(obj.step == 4) { document.getElementById(id + '1').play(); }
+	},
+
+	play: function(id) {
+
+		// Work out alternate video object
+		this.idCurrent = (((this.idCurrent - 2) * -1) + 1);
+		var idCurrentAlt = (((this.idCurrent - 2) * -1) + 1);
+
+		// Work out video objects
+		obj1 = document.getElementById(id + this.idCurrent);
+		obj2 = document.getElementById(id + idCurrentAlt);
+
+		// Play video (But do not show it yet)
+		obj1.play();
+
+		// ... then after transition delay ...
+		_self = this;
+		setTimeout(function() {
+
+			// Video transition
+			obj2.style.zIndex = _self.zIndex - 1;		// Move alt video to position -1 (Behind video 1)
+			obj1.style.zIndex = _self.zIndex + 1;		// Move video to position 1
+			obj2.style.zIndex = _self.zIndex;			// Move alt video to position 0 ready for next transition
+
+			// Set up video 2 ready to play
+			obj2.pause();
+			obj2.currentTime = 0;
+
+		}, this.transitionDelay);
+	},
+
+	create: function(obj, id, index) {
+
+		// Create video object
+		var videoObj = document.createElement('video');
+		videoObj.volume = 0.1;
+		videoObj.id = id + index;
+
+		// Create video source(s)
+		for(var i=0; i<this.paths.length; i++) {
+
+			var videoObjSource = document.createElement('source');
+			videoObjSource.src = this.paths[i];
+			videoObjSource.type = this.types[i];
+			videoObj.appendChild(videoObjSource);
+		}
+
+		// On can play through event handler
+		videoObj.oncanplaythrough = this.check(this, id);		// Video step
+
+		// Loaded meta data event handler
+		videoObj.loadedmetadata = this.check(this, id);		// Video step
+
+		// Video playing event handlers
+		videoObj.videoLoopSelf = this;
+		videoObj.videoLoopID = id;
+		videoObj.addEventListener('playing', function(evt) {
+
+			_self = evt.target.videoLoopSelf;
+			id = evt.target.videoLoopID;
+
+			setTimeout(function() {
+
+				_self.play(id);
+
+			}, _self.length);
+
+		}, false);
+
+		// Set initial z-index
+		videoObj.style.zIndex = this.zIndex + (2 - index);
+
+		// Append video to videoloop object
+		obj.appendChild(videoObj);
+	}
+};

public/loop/russians/VideoLoop.js

@@ -0,0 +1,133 @@
+//
+//	VideoLoop.js - Provides (almost) seamless video looping and overcomes HTML 5 video loop attribute pause
+//	By Mark Westguard (http://www.westguardsolutions.com)
+//
+
+function VideoLoop(id) {
+
+	var about = {
+
+		Version: 0.1,
+		Author: "Mark Westguard",
+		Created: "09/01/2015",
+		Updated: "09/02/2015"
+	};
+
+	if(id) {
+
+		if(window === this) { return new VideoLoop(id); }
+
+		// Configuration
+		this.length = 1000;			// Precise (as you can) length of video in milliseconds
+		this.zIndex = 10000;		// Z-Index of video (z-index of +1 and -1 this value will also be used)
+		this.transitionDelay = 0;	// Video transition delay
+		this.paths = [];
+		this.types = [];
+		// Variables
+		this.id = id;
+		this.idCurrent = 1;			// Current video playing
+		this.step = 0;				// Loading step
+		return this;
+
+	} else {
+
+		return about;
+	}
+}
+
+VideoLoop.prototype = {
+
+	// Initialize
+	init: function() {
+
+		// Create 2 videos
+		for(var i=1; i<=2; i++) {
+
+			this.create(document.getElementById(this.id), this.id, i);
+		}
+	},
+
+	// Check if all checks are complete
+	check: function(obj, id) {
+
+		// Increment video steps
+		obj.step++;
+
+		// When all four conditions are met, start playing video 1
+		if(obj.step == 4) { document.getElementById(id + '1').play(); }
+	},
+
+	play: function(id) {
+
+		// Work out alternate video object
+		this.idCurrent = (((this.idCurrent - 2) * -1) + 1);
+		var idCurrentAlt = (((this.idCurrent - 2) * -1) + 1);
+
+		// Work out video objects
+		obj1 = document.getElementById(id + this.idCurrent);
+		obj2 = document.getElementById(id + idCurrentAlt);
+
+		// Play video (But do not show it yet)
+		obj1.play();
+
+		// ... then after transition delay ...
+		_self = this;
+		setTimeout(function() {
+
+			// Video transition
+			obj2.style.zIndex = _self.zIndex - 1;		// Move alt video to position -1 (Behind video 1)
+			obj1.style.zIndex = _self.zIndex + 1;		// Move video to position 1
+			obj2.style.zIndex = _self.zIndex;			// Move alt video to position 0 ready for next transition
+
+			// Set up video 2 ready to play
+			obj2.pause();
+			obj2.currentTime = 0;
+
+		}, this.transitionDelay);
+	},
+
+	create: function(obj, id, index) {
+
+		// Create video object
+		var videoObj = document.createElement('video');
+		videoObj.setAttribute("muted" , "true");
+		videoObj.setAttribute("preload" , "auto");
+		videoObj.id = id + index;
+		// Create video source(s)
+		for(var i=0; i<this.paths.length; i++) {
+			
+			var videoObjSource = document.createElement('source');
+			videoObjSource.src = this.paths[i];
+			videoObjSource.type = this.types[i];
+			videoObj.appendChild(videoObjSource);
+		}
+
+		// On can play through event handler
+		videoObj.oncanplaythrough = this.check(this, id);		// Video step
+
+		// Loaded meta data event handler
+		videoObj.loadedmetadata = this.check(this, id);		// Video step
+
+		// Video playing event handlers
+		videoObj.videoLoopSelf = this;
+		videoObj.videoLoopID = id;
+		videoObj.addEventListener('playing', function(evt) {
+
+			_self = evt.target.videoLoopSelf;
+			id = evt.target.videoLoopID;
+
+			setTimeout(function() {
+
+				_self.play(id);
+
+			}, _self.length);
+
+		}, false);
+
+		// Set initial z-index
+		videoObj.style.zIndex = this.zIndex + (2 - index);
+
+		// Append video to videoloop object
+		obj.appendChild(videoObj);
+	}
+};

public/loop/russians/index.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Eins Zwei Polizei seamless html5 loop</title>
+<link rel="stylesheet" href="style.css"></link>
+</head>
+
+<body>
+
+<div class="source_info">
+	<span>Volume</span> <input id="volume" type="range" min="-1" max="0.1" step="0.01" value="-0.8"/>
+</div>
+
+<div id="myVideoLoop">
+</div>
+<div id="html5canloop">
+<button onclick="change_css();">Reveal the magic</button> <button id="hidden_default" onclick="change_css_back();">Unreveal the magic</button><br />
+</div>
+<!-- Scripts -->
+<script src="VideoLoop.js"></script>
+<script>
+
+        window.onload = function() {
+
+                // Initialize video loop
+                videoLoopObj = new VideoLoop('myVideoLoop');
+				this.muted = true;
+                videoLoopObj.length = 13550;
+				videoLoopObj.transitionDelay = 10;
+                videoLoopObj.paths = ['fzkpmk.webm'];
+                videoLoopObj.types = ['video/webm'];
+                videoLoopObj.init();
+        }
+
+</script>
+<script src="yPXnf.js" type="text/javascript"></script>
+  <script>
+
+    loopify("fapadt.webm",ready);
+
+    function ready(err,loop){
+      if (err) {
+        console.warn(err);
+      }
+
+        loop.play();
+    }
+
+  </script>
+
+    <script>
+        function change_css(){
+            document.getElementById('myVideoLoop1').style.cssText = 'position:relative; object-fit: contain;padding-bottom: 150px;';
+	    document.getElementById('myVideoLoop2').style.cssText = 'position:relative; object-fit: contain;padding-bottom: 150px;';
+	    document.getElementById('hidden_default').style.cssText = 'visibility: visible;'; 
+        }
+    </script>
+
+    <script>
+        function change_css_back(){
+            document.getElementById('myVideoLoop2').style.cssText = 'position:absolute; z-index: 10000;';
+            document.getElementById('myVideoLoop1').style.cssText = 'position:absolute; z-index: 10001;'; 
+	    document.getElementById('hidden_default').style.cssText = 'visibility: hidden;';
+        }
+    </script>
+
+</body>
+</html>
+

public/loop/russians/style.css

@@ -0,0 +1,143 @@
+html, body {
+	width: 100%;
+	height: 100%;
+}
+
+* { 
+	margin: 0px; 
+	padding: 0px; 
+	overflow: hidden; 
+}
+
+body {
+	background: black;
+}
+
+#myVideoLoop video { 
+	position: absolute; 
+}
+
+div#myVideoLoop {
+    width: inherit;
+    height: inherit;
+    display: flex;
+    justify-content: center;
+}
+
+div#html5canloop {
+    color: white;
+    position: absolute;
+    bottom: 0;
+    font-weight: bold;
+    padding: 10px;
+    background: #202020;
+}
+
+button#hidden_default {
+	visibility: hidden;
+}
+
+.source_info {
+    color: white;
+    width: inherit;
+    background: #0d0d0d;
+    padding: 10px;
+}
+
+span#sinfo {
+    padding: 10px;
+    font-style: italic;
+    vertical-align: super;
+}
+
+/*  #myVideoLoop {
+    position: fixed;
+    top: 0; right: 0; bottom: 0; left: 0;
+    overflow: hidden;
+  }
+  #myVideoLoop > video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  @media (min-aspect-ratio: 16/9) {
+    #myVideoLoop > video { height: 300%; top: -100%; }
+  }
+  @media (max-aspect-ratio: 16/9) {
+    #myVideoLoop > video { width: 300%; left: -100%; }
+  }
+  @supports (object-fit: cover) {
+    #myVideoLoop > video {
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      object-fit: cover;
+    }
+  }*/
+
+input#volume {
+    vertical-align: sub;
+    margin-left: 10px;
+}
+
+img#rotation_img {
+    height: 35px;
+    -webkit-animation: rotation 1s infinite linear;
+    float: left;
+    margin-right: 10px;
+}
+
+div#early_alpha {
+    float: left;
+}
+
+a#home {
+    color: chartreuse;
+    font-family: monospace;
+    text-decoration: none;
+    font-style: italic;
+    font-weight: 800;
+}
+
+span#alpha_l00p {
+    vertical-align: super;
+}
+
+@-webkit-keyframes rotation {
+	from {
+	-webkit-transform: rotate(0deg);
+	}
+
+	to {
+	-webkit-transform: rotate(359deg);
+	}
+}
+
+/******* Chrome specific */
+input[type=range] {
+    height: 31px;
+    -webkit-appearance: none;
+    background: #0d0d0d;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 5px;
+    cursor: pointer;
+    background: #f51945;
+    border-radius: 4px;
+    border: 1px solid #f51945;
+}
+
+input[type=range]::-webkit-slider-thumb {
+    height: 20px;
+    width: 20px;
+    border-radius: 10px;
+    background: #1d1c1c;
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: -8.5px;
+    border: 2px solid white;
+    margin-left: 0px;
+}

public/loop/russians/yPXnf.js

@@ -0,0 +1,87 @@
+(function() {
+
+    function loopify(uri,cb) {
+
+      var context = new (window.AudioContext || window.webkitAudioContext)(),
+          request = new XMLHttpRequest();
+
+      request.responseType = "arraybuffer";
+      request.open("GET", uri, true);
+
+      // XHR failed
+      request.onerror = function() {
+        cb(new Error("Couldn't load audio from " + uri));
+      };
+
+      // XHR complete
+      request.onload = function() {
+        context.decodeAudioData(request.response,success,function(err){
+          // Audio was bad
+          cb(new Error("Couldn't decode audio from " + uri));
+        });
+      };
+
+      request.send();
+
+      function success(buffer) {
+
+        var source;
+
+        function play() {
+
+          // Stop if it's already playing
+          stop();
+
+          // Create a new source (can't replay an existing source)
+          source = context.createBufferSource();
+          source.connect(context.destination);
+
+		var gainNode = context.createGain();
+		gainNode.gain.value = -0.8;
+		gainNode.connect(context.destination);
+		source.connect(gainNode);	
+
+		document.getElementById('volume').addEventListener('change', function() {
+    		gainNode.gain.value = this.value;
+		});
+
+
+          // Set the buffer
+          source.buffer = buffer;
+          source.loop = true;
+
+          // Play it
+          source.start(0);
+
+        }
+
+        function stop() {
+
+          // Stop and clear if it's playing
+          if (source) {
+            source.stop();
+            source = null;
+          }
+
+        }
+
+        cb(null,{
+          play: play,
+          stop: stop
+        });
+
+      }
+
+    }
+
+    loopify.version = "0.1";
+
+    if (typeof define === "function" && define.amd) {
+      define(function() { return loopify; });
+    } else if (typeof module === "object" && module.exports) {
+      module.exports = loopify;
+    } else {
+      this.loopify = loopify;
+    }
+
+})();

public/loop/shake/VideoLoop.js

@@ -0,0 +1,134 @@
+//
+//	VideoLoop.js - Provides (almost) seamless video looping and overcomes HTML 5 video loop attribute pause
+//	By Mark Westguard (http://www.westguardsolutions.com)
+//
+
+function VideoLoop(id) {
+
+	var about = {
+
+		Version: 0.1,
+		Author: "Mark Westguard",
+		Created: "09/01/2015",
+		Updated: "09/02/2015"
+	};
+
+	if(id) {
+
+		if(window === this) { return new VideoLoop(id); }
+
+		// Configuration
+		this.length = 1000;			// Precise (as you can) length of video in milliseconds
+		this.zIndex = 10000;		// Z-Index of video (z-index of +1 and -1 this value will also be used)
+		this.transitionDelay = 0;	// Video transition delay
+		this.paths = [];
+		this.types = [];
+
+		// Variables
+		this.id = id;
+		this.idCurrent = 1;			// Current video playing
+		this.step = 0;				// Loading step
+
+		return this;
+
+	} else {
+
+		return about;
+	}
+}
+
+VideoLoop.prototype = {
+
+	// Initialize
+	init: function() {
+
+		// Create 2 videos
+		for(var i=1; i<=2; i++) {
+
+			this.create(document.getElementById(this.id), this.id, i);
+		}
+	},
+
+	// Check if all checks are complete
+	check: function(obj, id) {
+
+		// Increment video steps
+		obj.step++;
+
+		// When all four conditions are met, start playing video 1
+		if(obj.step == 4) { document.getElementById(id + '1').play(); }
+	},
+
+	play: function(id) {
+
+		// Work out alternate video object
+		this.idCurrent = (((this.idCurrent - 2) * -1) + 1);
+		var idCurrentAlt = (((this.idCurrent - 2) * -1) + 1);
+
+		// Work out video objects
+		obj1 = document.getElementById(id + this.idCurrent);
+		obj2 = document.getElementById(id + idCurrentAlt);
+
+		// Play video (But do not show it yet)
+		obj1.play();
+
+		// ... then after transition delay ...
+		_self = this;
+		setTimeout(function() {
+
+			// Video transition
+			obj2.style.zIndex = _self.zIndex - 1;		// Move alt video to position -1 (Behind video 1)
+			obj1.style.zIndex = _self.zIndex + 1;		// Move video to position 1
+			obj2.style.zIndex = _self.zIndex;			// Move alt video to position 0 ready for next transition
+
+			// Set up video 2 ready to play
+			obj2.pause();
+			obj2.currentTime = 0;
+
+		}, this.transitionDelay);
+	},
+
+	create: function(obj, id, index) {
+
+		// Create video object
+		var videoObj = document.createElement('video');
+		videoObj.id = id + index;
+
+		// Create video source(s)
+		for(var i=0; i<this.paths.length; i++) {
+
+			var videoObjSource = document.createElement('source');
+			videoObjSource.src = this.paths[i];
+			videoObjSource.type = this.types[i];
+			videoObj.appendChild(videoObjSource);
+		}
+
+		// On can play through event handler
+		videoObj.oncanplaythrough = this.check(this, id);		// Video step
+
+		// Loaded meta data event handler
+		videoObj.loadedmetadata = this.check(this, id);		// Video step
+
+		// Video playing event handlers
+		videoObj.videoLoopSelf = this;
+		videoObj.videoLoopID = id;
+		videoObj.addEventListener('playing', function(evt) {
+
+			_self = evt.target.videoLoopSelf;
+			id = evt.target.videoLoopID;
+
+			setTimeout(function() {
+
+				_self.play(id);
+
+			}, _self.length);
+
+		}, false);
+
+		// Set initial z-index
+		videoObj.style.zIndex = this.zIndex + (2 - index);
+
+		// Append video to videoloop object
+		obj.appendChild(videoObj);
+	}
+};

public/loop/shake/index.html

@@ -0,0 +1,63 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+<title>Shake, Shake, Shake seamless html5 loop</title>
+<link rel="stylesheet" href="style.css"></link>
+</head>
+
+<body>
+
+<div class="source_info"><a href="../index.html"> <- back</a> <span id="sinfo">KC & The Sunshine Band - Shake, shake, shake</span> <input id="volume" type="range" min="-1" max="0.1" step="0.01" value="-0.8"/></div>
+<div id="myVideoLoop">
+</div>
+<!--<div id="html5canloop">
+<p>Seamless loop of audio and video using html5 made possible by <a href="https://github.com/veltman/loopify">veltman's loopify</a> and <a href="https://github.com/westguard/VideoLoop">westguard's VideoLoop</a></p>
+<button onclick="change_css();">Reveal the magic</button> <button id="hidden_default" onclick="change_css_back();">Unreveal the magic</button><br />
+</div>-->
+<!-- Scripts -->
+<script src="VideoLoop.js"></script>
+
+
+<script src="yPXnf.js" type="text/javascript"></script>
+  <script>
+
+    loopify("bootyshake.flac",ready);
+
+    function ready(err,loop){
+      if (err) {
+        console.warn(err);
+      }
+            loop.play();
+        /*document.getElementById("start").addEventListener("click",function(){
+            videoLoopObj.init();
+            loop.play();
+        });
+*/
+        videoLoopObj = new VideoLoop('myVideoLoop');
+        videoLoopObj.length = 15870;
+        videoLoopObj.paths = ['bootyshake.mp4'];
+        videoLoopObj.types = ['video/mp4'];
+        videoLoopObj.init();
+    }
+
+  </script>
+
+    <script>
+        function change_css(){
+            document.getElementById('myVideoLoop1').style.cssText = 'position:relative; object-fit: contain;';
+	    document.getElementById('myVideoLoop2').style.cssText = 'position:relative; object-fit: contain;';
+	    document.getElementById('hidden_default').style.cssText = 'visibility: visible;'; 
+        }
+    </script>
+
+    <script>
+        function change_css_back(){
+            document.getElementById('myVideoLoop2').style.cssText = 'position:absolute; z-index: 10000;';
+            document.getElementById('myVideoLoop1').style.cssText = 'position:absolute; z-index: 10001;'; 
+	    document.getElementById('hidden_default').style.cssText = 'visibility: hidden;';
+        }
+    </script>
+
+</body>
+</html>

public/loop/shake/style.css

@@ -0,0 +1,117 @@
+html, body {
+	width: 100%;
+	height: 100%;
+}
+
+* { 
+	margin: 0px; 
+	padding: 0px; 
+	overflow: hidden; 
+}
+
+body {
+	background: black;
+}
+
+#myVideoLoop video { 
+	position: absolute; 
+}
+
+div#myVideoLoop {
+	height: inherit;
+	display: flex;
+	justify-content: center;
+}
+
+div#html5canloop {
+    color: white;
+    position: absolute;
+    bottom: 0;
+    font-weight: bold;
+    padding: 10px;
+    background: #202020;
+}
+
+button#hidden_default {
+	visibility: hidden;
+}
+
+.source_info {
+    color: white;
+    width: inherit;
+    background: #0d0d0d;
+    position: fixed;
+    z-index: 1;
+    padding: 10px;
+}
+
+span#sinfo {
+    padding: 10px;
+    font-style: italic;
+    vertical-align: super;
+}
+
+  #myVideoLoop {
+    position: fixed;
+    top: 0; right: 0; bottom: 0; left: 0;
+    overflow: hidden;
+  }
+  #myVideoLoop > video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  @media (min-aspect-ratio: 16/9) {
+    #myVideoLoop > video { height: 300%; top: -100%; }
+  }
+  @media (max-aspect-ratio: 16/9) {
+    #myVideoLoop > video { width: 300%; left: -100%; }
+  }
+  @supports (object-fit: cover) {
+    #myVideoLoop > video {
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      object-fit: cover;
+    }
+  }
+
+input#volume {
+    vertical-align: sub;
+    margin-left: 10px;
+}
+
+/*******/
+input[type=range] {
+    height: 31px;
+    -webkit-appearance: none;
+    background: #0d0d0d;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 5px;
+    cursor: pointer;
+    background: #f51945;
+    border-radius: 4px;
+    border: 1px solid #f51945;
+}
+
+input[type=range]::-webkit-slider-thumb {
+    height: 20px;
+    width: 20px;
+    border-radius: 10px;
+    background: #1d1c1c;
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: -8.5px;
+    border: 2px solid white;
+    margin-left: 0px;
+}
+
+.source_info {
+    vertical-align: super;
+    display: flex;
+    align-items: center;
+}

public/loop/shake/yPXnf.js

@@ -0,0 +1,87 @@
+(function() {
+
+    function loopify(uri,cb) {
+
+      var context = new (window.AudioContext || window.webkitAudioContext)(),
+          request = new XMLHttpRequest();
+
+      request.responseType = "arraybuffer";
+      request.open("GET", uri, true);
+
+      // XHR failed
+      request.onerror = function() {
+        cb(new Error("Couldn't load audio from " + uri));
+      };
+
+      // XHR complete
+      request.onload = function() {
+        context.decodeAudioData(request.response,success,function(err){
+          // Audio was bad
+          cb(new Error("Couldn't decode audio from " + uri));
+        });
+      };
+
+      request.send();
+
+      function success(buffer) {
+
+        var source;
+
+        function play() {
+
+          // Stop if it's already playing
+          stop();
+
+          // Create a new source (can't replay an existing source)
+          source = context.createBufferSource();
+          source.connect(context.destination);
+
+		var gainNode = context.createGain();
+		gainNode.gain.value = -0.8;
+		gainNode.connect(context.destination);
+		source.connect(gainNode);	
+
+		document.getElementById('volume').addEventListener('change', function() {
+    		gainNode.gain.value = this.value;
+		});
+
+
+          // Set the buffer
+          source.buffer = buffer;
+          source.loop = true;
+
+          // Play it
+          source.start(0);
+
+        }
+
+        function stop() {
+
+          // Stop and clear if it's playing
+          if (source) {
+            source.stop();
+            source = null;
+          }
+
+        }
+
+        cb(null,{
+          play: play,
+          stop: stop
+        });
+
+      }
+
+    }
+
+    loopify.version = "0.1";
+
+    if (typeof define === "function" && define.amd) {
+      define(function() { return loopify; });
+    } else if (typeof module === "object" && module.exports) {
+      module.exports = loopify;
+    } else {
+      this.loopify = loopify;
+    }
+
+})();

resources/views/layout1/irc.blade.php

@@ -6,7 +6,11 @@
 
 <div class="irc-content">
 <div class="webchat">
+	@if(auth()->check())
 	<iframe src="https://webirc.n0xy.net?nick={{Auth::user()->username}}&join=%23w0bm&username={{Auth::user()->username}}"></iframe> 
+	@else
+	<iframe src="https://webirc.n0xy.net?join=%23w0bm&"></iframe>
+	@endif
 </div>
 <div class="irc-info">
 	<h5>IRC</h5>

resources/views/layout1/layout.blade.php

@@ -63,7 +63,7 @@
 @if(auth()->check())
 <canvas class="hidden-xs" id="bg"></canvas>
 @else
-<video id="placeholder" src="placeholder.webm" autoplay="" muted="" loop=""></video>
+<video id="placeholder" src="cyberplaceholder.mp4" autoplay="" muted="" loop=""></video>
 @endif
 
 @include('partials.navigation')

resources/views/layout1/upload.blade.php

@@ -66,7 +66,7 @@
 			<span class="" id="laz0r-fire"></span>
 			<span class="hidden-xs" id="shoop-laz0r"></span>
 		    </button>
-		    <p style="text-align:center; padding-top: 5px; white-space: normal;">Before you click upload make sure you have read the <a href="/rules">Rules</a></p>
+		    <p style="text-align:center; padding-top: 5px; white-space: normal;">Before you fire the laz0r make sure you have read the <a href="/rules">Rules</a>! <br><i>With great power comes great responsibility</i></p>
 		    <p style="text-align:center; padding-top: 5px; white-space: normal;"><span id="big">10</span> uploads <span id="big">every 12 hours.</span> – Maximum filesize: <span id="big">40MB.</span> – Only <span id="big">.webm (vp8/vp9) with sound</span> allowed. Need <a href="/webm">help?</a></p>
                 </div>
             </div>

resources/views/layout1/video.blade.php

@@ -17,10 +17,14 @@
             </div>
             @endif
             <div class="embed-responsive embed-responsive-16by9">
+            	                        	@if($video->id == '27204')
+            	<iframe src="https://w0bm.com/loop/index.html"></iframe>
+            	@else
 		<video id="video" loop controls preload="auto" crossorigin="anonymous">
 			<source src="/b{{ "/" . $video->file }}">
 			<!-- rip fapple! <source src="//fapple.w0bm.com/{{str_replace(".webm","",$video->file)}}.mp4"> -->
 		</video>
+		@endif
 		    	@if($video->category->name === 'Anime' || $video->category->name === 'Otomad')
 		    	<div class="anime-thumb-opener hidden-xs"><i title="Generate Anime Thumbnail!" class="fa fa-file-image-o"></i></div>
 				<div style="display: none;" class="anime-thumb">
@@ -121,7 +125,7 @@
 											@endif
 											<strong>Category:</strong> {{$video->category->name}}</div>">
 						</button>
-						<span id="uploader">uploaded by <a style="color: white" href="{{ url('user/' . $video->user->username) }}">{!! $video->user->displayName() !!}</a></span> <time class="timeago" data-toggle="tooltip" data-placement="top" datetime="{{$video->created_at->toIso8601String()}}" title="{{$video->created_at->toIso8601String()}}"></time>@if(auth()->check() && (auth()->user()->can('edit_video') || auth()->user()->id == $video->user_id)) <a class="edit_video" href="#" data-toggle="modal" data-target="#webmeditmodal">[edit]</a>@endif @if(auth()->check() && auth()->user()->can('delete_video'))<a class="delete_video" href="#">[del]</a>@endif 
+						<span id="uploader">uploaded by <a class="{{ $video->user->username }}" style="color: white" href="{{ url('user/' . $video->user->username) }}">{!! $video->user->displayName() !!}</a></span> <time class="timeago" data-toggle="tooltip" data-placement="top" datetime="{{$video->created_at->toIso8601String()}}" title="{{$video->created_at->toIso8601String()}}"></time>@if(auth()->check() && (auth()->user()->can('edit_video') || auth()->user()->id == $video->user_id)) <a class="edit_video" href="#" data-toggle="modal" data-target="#webmeditmodal">[edit]</a>@endif @if(auth()->check() && auth()->user()->can('delete_video'))<a class="delete_video" href="#">[del]</a>@endif 
 				</span>
 			</div>
 		</div>

resources/views/layout2/tos.blade.php

@@ -0,0 +1,9 @@
+@extends('profilelayout')
+@section('novidcontent')
+<h5>Terms of Service</h5>
+<p>Being a member of w0bm.com can be described best with the following quote: <blockquote>„It's a privilege, not a right“</blockquote></p>
+<p>w0bm.com is a voluntary project provided to you free of charge for the sole purpose of enjoyment and amusement for you the users.</p>
+<p>You (the users) agree to read and accept the rules and behave accordingly when on w0bm.com</p>
+<p>w0bm.com can terminate accounts, comments and/or uploads at any time without any reason</p>
+<p>Hotlinking our direct video urls is not welcome, since it puts the whole collection in danger of copyright reports. Please do not share any direct links in frequently visited forums! w0bm.com may need to block hotlinking and direct url access if problems will occur, which has negative side effects for nearly everyone using this site on a daily basis.</p>
+@endsection

resources/views/layout2/video.blade.php

@@ -29,9 +29,13 @@
 
 @section('floatvid')
         <div class="video-wrap embed-responsive embed-responsive-16by9 rounded" id="sticky-container">
+            @if($video->id == '27204')
+                <iframe src="https://w0bm.com/loop/index.html"></iframe>
+            @else
             <video class="video scrollable" loop id="video">
                 <source src="/b{{ "/" . $video->file }}">
             </video>
+            @endif
         </div>
         @include('video-partials.legacy-videonav')
         @include('video-partials.legacy-metadata')

resources/views/layout6/video.blade.php

@@ -17,10 +17,14 @@
             </div>
             @endif
             <div class="embed-responsive embed-responsive-16by9">
+            	           	@if($video->id == '27204')
+            	<iframe src="https://w0bm.com/loop/index.html"></iframe>
+            @else
 		<video id="video" loop controls preload="auto" crossorigin="anonymous">
 			<source src="/b{{ "/" . $video->file }}">
 			<!-- rip fapple! <source src="//fapple.w0bm.com/{{str_replace(".webm","",$video->file)}}.mp4"> -->
 		</video>
+		@endif
 		    	@if($video->category->name === 'Anime' || $video->category->name === 'Otomad')
 		    	<div class="anime-thumb-opener hidden-xs"><i title="Generate Anime Thumbnail!" class="fa fa-file-image-o"></i></div>
 				<div style="display: none;" class="anime-thumb">