Update index.html

AJYaBoi · Aug 6, 2024 · 30fae6c · 30fae6c
1 parent 3afaee4
commit 30fae6c
Showing 1 changed file with 34 additions and 3 deletions.
diff --git a/VideoPlayer/index.html b/VideoPlayer/index.html
@@ -55,17 +55,48 @@
         .hidden {
             display: none;
         }
+        .video-wrapper {
+            position: absolute;
+            width: 80%;
+            max-width: 800px;
+            z-index: 20;
+        }
         .old-video-effect {
+            position: relative;
+            width: 100%;
+            height: auto;
             filter: grayscale(100%) contrast(150%) brightness(80%);
         }
+        .old-video-effect::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: url('https://www.transparenttextures.com/patterns/crossword.png');
+            opacity: 0.2;
+        }
+        .old-video-effect::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(255, 0, 0, 0.1);
+            mix-blend-mode: screen;
+        }
     </style>
 </head>
 <body>
     <div class="logo-container" id="logoContainer"></div>
     <div class="dropzone hidden" id="dropzone">
         Drop your video file here
     </div>
-    <video id="videoPlayer" class="hidden" controls></video>
+    <div class="video-wrapper hidden" id="videoWrapper">
+        <video id="videoPlayer" class="old-video-effect" controls></video>
+    </div>
 
     <script>
         const dvdImages = [
@@ -78,6 +109,7 @@
 
         const logoContainer = document.getElementById('logoContainer');
         const dropzone = document.getElementById('dropzone');
+        const videoWrapper = document.getElementById('videoWrapper');
         const videoPlayer = document.getElementById('videoPlayer');
 
         function createDVDLogos() {
@@ -117,8 +149,7 @@
             if (file && file.type.startsWith('video/')) {
                 const videoURL = URL.createObjectURL(file);
                 videoPlayer.src = videoURL;
-                videoPlayer.classList.remove('hidden');
-                videoPlayer.classList.add('old-video-effect');
+                videoWrapper.classList.remove('hidden');
                 videoPlayer.play();
             } else {
                 alert('Please drop a video file.');