lots of improvements:

hover animation
correct jumpback position after video view
load when scroll - not all at beginning

js/index.js

@@ -1,51 +1,71 @@
-$(document).ready(function() {
-  console.log("finished loading page");
-  $.post('php/videoload.php','action',function(data){
-    console.log(data);
-    for (var i in data) {
-      if (data[i] != "." && data[i] != "..") {
-        //loadVideo("videos/prn/"+data[i],"");
-        loadPreview(data[i]);
-        console.log(data[i]);
-      }
+var videos;
+var loadindex = 0;
+var scrollposition = 0;
 
-    }
-  },'json');
-  //loadVideo("https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4",'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg');
+$(document).ready(function () {
+    $.post('php/videoload.php', 'action', function (data) {
+        videos = data;
+        loadPreviewBlock(12);
+    }, 'json');
 
-  $(".closebutton").click(function() {
-    $(".videopagewrapper").hide();
-    $(".previewcontainer").show();
-    $(".videowrapper").html("");
-  });
+    $(".closebutton").click(function () {
+        $(".videopagewrapper").hide();
+        $(".previewcontainer").show();
+        // scroll back to last scroll position
+        $(window).scrollTop(scrollposition);
+        $(".videowrapper").html("");
+    });
 });
 
+$(window).scroll(function () {
+    if ($(window).scrollTop() >= (($(document).height() - $(window).height() - 60))) {
+        if ($(".videowrapper").html() == "") {
+            loadPreviewBlock(6);
+        }
+    }
+});
+
+function loadPreviewBlock(nr) {
+    for (let i = 0; i < nr; i++) {
+        if (loadindex + i < videos.length) {
+            if (videos[loadindex + i] != "." && videos[loadindex + i] != "..") {
+                loadPreview(videos[loadindex + i]);
+            } else {
+                nr++;
+            }
+
+        }
+    }
+    loadindex += nr;
+}
+
 function loadPreview(src) {
-  var preview = $("<div class='videopreview'><div class='previewtitle'>"+src+"</div><div class='previewpic'><img style='width:100%;height:100%' src=\"videos/thumbnails/"+src+".jpg\" alt='no thumbnail found'></img></div></div>");
-  preview.attr('videourl',"videos/prn/"+src);
-  preview.attr('thumbnailurl',"videos/thumbnails/"+src);
-  preview.click(function() {
-    console.log("preview clicked");
-    loadVideo($(this).attr("videourl"),$(this).attr("thumbnailurl")+".jpg");
-  });
-  $(".previewcontainer").append(preview);
+    var preview = $("<div class='videopreview'><div class='previewtitle'>" + src + "</div><div class='previewpic'><img style='width:100%;height:100%' src=\"videos/thumbnails/" + src + ".jpg\" alt='no thumbnail found'></img></div></div>");
+    preview.attr('videourl', "videos/prn/" + src);
+    preview.attr('thumbnailurl', "videos/thumbnails/" + src);
+    preview.click(function () {
+        console.log("preview clicked");
+        scrollposition = $(window).scrollTop();
+        loadVideo($(this).attr("videourl"), $(this).attr("thumbnailurl") + ".jpg");
+    });
+    $(".previewcontainer").append(preview);
 }
 
-function loadVideo(src,posterlink) {
-  $(".videowrapper").html("<div class='myvideo'><video controls crossorigin playsinline id='player'></video></div>");
+function loadVideo(src, posterlink) {
+    $(".videowrapper").html("<div class='myvideo'><video controls crossorigin playsinline id='player'></video></div>");
 
-  const player = new Plyr('#player');
-  player.source = {
-    type: 'video',
-    sources: [
-      {
-      src: src,
-      type: 'video/mp4',
-      size: 1080,
-      }
-    ],
-    poster: posterlink
-  };
-  $(".videopagewrapper").show();
-  $(".previewcontainer").hide();
+    const player = new Plyr('#player');
+    player.source = {
+        type: 'video',
+        sources: [
+            {
+                src: src,
+                type: 'video/mp4',
+                size: 1080,
+            }
+        ],
+        poster: posterlink
+    };
+    $(".videopagewrapper").show();
+    $(".previewcontainer").hide();
 }