max width and height for player.php video

3 files changed, 32 insertions, 11 deletions

diff --git a/player.php b/player.php
index cd0446e2..f836af88 100644
--- a/player.php
+++ b/player.php
@@ -15,8 +15,10 @@ $loop = ($_GET['loop'] != "0");
         <a id="loop0" href="<?php echo $params; ?>&amp;loop=0"<?php if (!$loop) echo ' style="font-weight: bold"'; ?>>[play once]</a>
         <a id="loop1" href="<?php echo $params; ?>&amp;loop=1"<?php if ($loop) echo ' style="font-weight: bold"'; ?>>[loop]</a>
     </div>
-    <video controls<?php if ($loop) echo ' loop'; ?> src="<?php echo htmlspecialchars($_GET['v']); ?>">
-        Your browser does not support HTML5 video.
-    </video>
+    <div id="playercontent">
+        <video controls<?php if ($loop) echo ' loop'; ?> src="<?php echo htmlspecialchars($_GET['v']); ?>">
+            Your browser does not support HTML5 video. <a href="<?php echo htmlspecialchars($_GET['v']); ?>">[Download]</a>
+        </video>
+    </div>
 </body>
 </html>
diff --git a/playerstyle.css b/playerstyle.css
index 44d73757..efb570bb 100644
--- a/playerstyle.css
+++ b/playerstyle.css
@@ -1,19 +1,38 @@
 body {
     background: black;
     color: white;
-}
-video {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
+    margin: 0px;
 }
 #playerheader {
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    top: 0px;
+    height: 24px;
+    padding: 0px 4px;
     text-align: right;
+    font-size: 16px;
 }
 #playerheader a {
     color: white;
     text-decoration: none;
 }
-span.settings {
-    position: relative;
+span.settings div {
+    background: black;
+    z-index: 1;
+    padding-right: 4px;
+}
+#playercontent {
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    top: 24px;
+    bottom: 0px;
+}
+video {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 100%;
+    max-height: 100%;
 }
diff --git a/settings.js b/settings.js
index 54765190..e349b8ab 100644
--- a/settings.js
+++ b/settings.js
@@ -17,7 +17,7 @@ setDefault("videomuted", false);
 var settingsMenu = document.createElement("span");
 settingsMenu.className = "settings";
 settingsMenu.innerHTML = '<span>[Settings]</span>'
-    + '<div style="display: none; text-align: left; position: absolute; right: 0px; margin-left: -999em;">'
+    + '<div style="display: none; text-align: left; position: absolute; right: 0px; margin-left: -999em; margin-top: -1px;">'
     + '<label><input type="checkbox" name="videoexpand">Expand videos inline</label><br>'
     + '<label><input type="checkbox" name="videohover">Play videos on hover</label><br>'
     + '<label><input type="checkbox" name="videomuted">Open videos muted</label><br>'