fit video view to screen size

diff --git a/style.css b/style.css
index f1e18816f4613b9fd78f3fe795f5d3f9186239c8..bfd8541ed38e9e5c1d22e2c5e2bdd5dd9bba4c13 100644 (file)
--- a/style.css
+++ b/style.css
@@ -367,7 +367,7 @@ body#view { padding-bottom: 6em; }
 
 #view h1 {
   max-width: 100%;
-  margin: 1em 0; padding: 0 .5em;
+  margin: .5em .75em;
   font-size: 1.25em;
   font-weight: bold;
   word-break: break-word;
@@ -377,7 +377,20 @@ body#view { padding-bottom: 6em; }
 #view #mainvideo {
   display: inline;
   width: 100%;
-  max-height: 70%;
+  max-height: 240px;
+}
+@media(min-height: 400px) { #view #mainvideo { max-height: 320px; } }
+@media(min-height: 480px) { #view #mainvideo { max-height: 460px; } }
+@media(min-height: 520px) { #view #mainvideo { max-height: 480px; } }
+@media(min-height: 640px) { #view #mainvideo { max-height: 600px; } }
+@media(min-height: 700px) { #view #mainvideo { max-height: 640px; } }
+@media(min-height: 760px) { #view #mainvideo { max-height: 720px; } }
+@media(min-height: 1000px){ #view #mainvideo { max-height: 960px; } }
+@media(min-height: 1200px){ #view #mainvideo { max-height: 1080px;} }
+
+#view a[href$=download],
+#view a[href^=javascript] {
+  margin-left: 1em;
 }
 
 #view .time, #view .dim,

diff --git a/view.sh b/view.sh
index eb348c60522fa0b30f95c6dec35d3068f99351f1..887876d9beefe810f0213645b01b2502c3a5fa0a 100644 (file)
--- a/view.sh
+++ b/view.sh
@@ -11,7 +11,7 @@ printf 'Content-Type: text/html;charset=utf-8\r\n\r\n'
 
 { printf '
 [!DOCTYPE HTML]
-[html [head [title Listing]
+[html [head [title View]
   [meta name="viewport" content="width=device-width"]
   [link rel=stylesheet href="/style.css" ]
 ] [body #view
@@ -27,11 +27,11 @@ printf 'Content-Type: text/html;charset=utf-8\r\n\r\n'
   w_advsearch
   w_prefs
   printf '
-  [h1\n %s]
+  [video #mainvideo controls="controls" [source src="?a=download" type="video/mp4"]]
   [a "?a=download" Download]
   [a "javascript:stereoview(180, document.getElementById("mainvideo"));" View 180° Stereoscopic]
   [a "javascript:stereoview(360, document.getElementById("mainvideo"));" View 360° Stereoscopic]
-  [video #mainvideo controls="controls" [source src="?a=download" type="video/mp4"]]
+  [h1\n %s]
   [span .time %i:%02imin] [span .dim %ix%i] %s
   ' "$(HTML "${ITEM##*/}" |sed -r "$w_ascii"' s;[^0-9a-zA-Z&#];&[wbr];g')" \
     "$((length / 60))" "$((length % 60))" "$width" "$height" \