diff --git a/videoPlayer.html b/videoPlayer.html
new file mode 100644
index 0000000..3268901
--- /dev/null
+++ b/videoPlayer.html
@@ -0,0 +1,237 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tesses YouTube Downloader</title>
+    <link rel="manifest" href="manifest.webmanifest" crossorigin="use-credentials">
+    <link rel="stylesheet" href="css/styles.css" crossorigin="use-credentials">
+    <link href="css/bootstrap.min.css" rel="stylesheet" crossorigin="use-credentials">
+</head>
+<body>
+    
+    <nav class="navbar navbar-expand-lg bg-danger navbar-dark">
+        <div class="container">
+            <a href="#" data-target="home" class="navbar-brand spalnk">Tesses YouTube Downloader</a>
+            
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <div class="collapse navbar-collapse" id="navmenu">
+                <ul class="navbar-nav ms-auto">
+                   
+                    <li class="nav-item">
+                        <a href="upload.html" class="nav-link">Upload</a>
+                    </li>
+                    <li class="nav-item">
+                        <a href="legacy.html" class="nav-link">Legacy Mode</a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="extensions.html" class="nav-link">Extensions</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <main>
+        <section class="bg-danger text-light p-3">
+            <div class="container">
+                <div>
+                    <div>
+                        <h3>
+                            Download YouTube Videos, Playlists or Channels
+                        </h3>
+                        
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section class="bg-light text-dark p-3">
+         <!--   <div class="dropdown-menu">
+                <a class="dropdown-item" href="#">Server Download (SD)</a>
+                <a class="dropdown-item" href="#">Server Download (HD)</a>
+                <a class="dropdown-item" href="#">Server Download (Audio Only)</a>
+                <div role="separator" class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">Download To Device (SD)</a>
+                <a class="dropdown-item" href="#">Download To Device (HD)</a>
+                <a class="dropdown-item" href="#">Download To Device (Audio Only)</a>
+              </div>-->
+                    
+            <div class="input-group">
+              
+           
+                <input type="text" id="download_text_box" class="form-control" placeholder="https://www.youtube.com/watch?v=il9nqWw9W3Y" aria-label="Text input with segmented dropdown button">
+                <select class="form-control custom-select" id="selector" style="max-width: 6em;">
+                    
+                    <option selected value=0>YouTube</option>
+                    <!--<option value=1>Playlist</option>
+                    <option value=2>Channel</option>
+                    <option value=3>User</option>-->
+                    <option value=4>Download</option>
+                    <option value=5>Play</option>
+                  </select>
+                  <select class="form-control custom-select" id="res_selector" style="max-width: 5em;">
+                    
+                    <option selected  value=1>SD</option>
+                    <option value=0>HD</option>
+                    <option value=2>Audio</option>
+                   
+                    
+                  </select>
+                <div class="input-group-append">
+                   
+                  <button id="download_button" type="button" class="btn btn-primary">Download</button>
+                  
+                    
+                  
+                </div>
+              </div>
+            
+        </section>
+       
+   
+    
+        <!--Home Page-->
+        
+        <section class="bg-light text-dark p-3">
+           <div class="container" style="text-align: center;">
+
+           
+           <video controls id="my_player1" style="max-height: 45%;max-width: 90%;" loop  >
+              
+           </video>
+           </div>
+            
+        </section>
+        <section class="bg-danger text-light p-3" style="height: 100%;">
+            <div class="container">
+
+               <a id="video_link" style="text-decoration: none" class="text-info" href="/"> <h1 id="video_name"></h1></h1></a>
+               
+                <a id="author_link" style="text-decoration: none" class="text-info" href="/"><h2 id="author_name"></h2></a>
+                <hr>
+              <h4 ><a style="text-decoration: none" class="text-info" id="download_link" href="/">Download</a></h4>
+                <hr>
+                <h3 id="date">00/00/0000</h3> 
+                 <h3 id="views">42 views - 0 likes - 0 dislikes</h3>
+                 <hr>
+                 Keywords: <span id="keywords"></span>
+                <hr>
+                <p id="description">
+                
+                </p>
+                </div>
+        </section>
+        
+    </div>
+
+    
+   
+    </main>
+    
+  <!--  <script src="js/jquery.js"></script>
+     <script src="js/lazyload.js"></script>
+   <script src="js/spa.js"></script>
+    <script src="js/new_main.js"></script>-->
+    <script src="js/popper.min.js"></script>
+    <script src="js/bootstrap.min.js"></script>
+    <script>
+        
+
+
+
+
+
+
+const my_date = document.getElementById('date');
+
+
+const video_url = document.getElementById('video_link');
+
+const myTitle = document.getElementById('video_name');
+
+
+const channel_name = document.getElementById('author_name');
+const channel_url = document.getElementById('author_link');
+const myViews = document.getElementById('views');
+const myKeywords = document.getElementById('keywords');
+const myDescription = document.getElementById('description');
+const download_link = document.getElementById('download_link');
+function progress2page(id)
+{
+   var xmlhttp = new XMLHttpRequest();
+
+
+xmlhttp.onreadystatechange = function() {
+  if (this.readyState == 4 && this.status == 200) {
+    var myData = JSON.parse(this.responseText);
+    //var progressStr=myData.Progress.toString() + '%';
+    //var progressData = myData.Progress;
+    //var fileLength = formatBytes(myData.Length);
+    var title = myData.Title;
+    var uploadDate = new Date(myData.UploadDate);
+    
+    var atitle = myData.AuthorTitle;
+    var acid = myData.AuthorChannelId;
+    var desc = myData.Description;
+    //var dur = sec2time(myData.Saved.Duration);
+    var views = myData.Views;
+    var likes = myData.Likes;
+    var dislikes = myData.Dislikes;
+    download_link.setAttribute('download',title + '-' + id + '.mp4');
+    //myProgress.setAttribute("value", progressData.toString());
+    //myProgressVal.textContent = progressStr;
+    
+    myDescription.textContent = desc;
+    myTitle.textContent = title;
+    channel_name.textContent = atitle;
+    myViews.textContent = views.toString() + " view(s) - " + likes.toString() + " like(s) - " + dislikes.toString() + " dislikes";
+   
+    channel_url.href = "https://www.youtube.com/channel/" + acid;
+    video_url.href = "https://www.youtube.com/watch?v=" + id;
+    
+    my_date.textContent = (uploadDate.getMonth() + 1).toString() + '/' + uploadDate.getDate().toString() + '/' + uploadDate.getFullYear().toString();
+      let kw = "";  
+    myData.Keywords.forEach((item, index) => {
+         if(index == 0)
+         {
+            kw = item;
+         }else{
+            kw += ", " + item;
+         }
+
+      });
+      
+      keywords.textContent = kw;
+   }
+   //if(!(fileLength === undefined || dur ))
+   {
+      //size_len.textContent = fileLength + " - " + dur;
+   }
+};
+xmlhttp.open("GET", "api/Storage/File/Info/" + id + ".json", true);
+xmlhttp.send();
+}
+        function play_video()
+        {
+            console.log(window.location.hash);
+              var vals=  window.location.hash.replace('#','').split('=');
+              const player=document.getElementById('my_player1');
+              
+              download_link.setAttribute('href','api/Storage/File/' + vals[0] + '/' + vals[1] + ".mp4");
+              player.setAttribute('src','api/Storage/File/' + vals[0] + '/' + vals[1] + ".mp4");
+              // /246x138/
+              player.setAttribute('poster','api/Storage/File/Thumbnails/246x138/' + vals[1] + ".jpg");
+             progress2page(vals[1]);
+             
+        }
+
+        
+        play_video();
+    </script>
+    <script src="js/download_video.js"></script>
+</body>
+</html>
\ No newline at end of file
