From 63f25e79f58d69e8b5708e3918f4e49953d02464 Mon Sep 17 00:00:00 2001
From: Christian Haschek <christian@haschek.at>
Date: Sun, 6 Dec 2015 23:45:35 +0100
Subject: [PATCH] changed the mp4 render page

---
 template_mp4.php | 34 +++++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 13 deletions(-)
diff --git a/template_mp4.php b/template_mp4.php
index 4f878a4..9d61c59 100644
--- a/template_mp4.php
+++ b/template_mp4.php
@@ -5,18 +5,10 @@
         <meta http-equiv="content-type" content="text/html;charset=utf-8" />
         <meta name="copyright" content="Copyright <?php echo date("Y"); ?> PictShare" />
         <meta id="viewport" name="viewport" content="width=<?php echo $width ?>, user-scalable=yes" />
+        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
 
         <style type="text/css">
-            /*#content, #video {
-                width:  <?php echo $width ?>px;
-                height: <?php echo $height ?>px;
-            }*/
-
-            video {  
-               width:100%; 
-               max-width:<?php echo $width ?>px; 
-               height:auto; 
-            }
+            *{margin:0px;padding:0px;}
         </style>
         
         <link rel="alternate" type="application/json+oembed" href="<?php echo DOMAINPATH; ?>backend.php?a=oembed&t=json&url=<?php echo rawurlencode(DOMAINPATH.$hash); ?>" title="PictShare" />
@@ -42,21 +34,37 @@
         <meta property="og:video:height"      content="<?php echo $height ?>" />
     </head>
     <body id="body">
-        <div id="content">
             <video id="video" poster="<?php echo DOMAINPATH.'preview/'.$hash; ?>" preload="auto" autoplay="autoplay" muted="muted" loop="loop" webkit-playsinline>
                 <source src="<?php echo DOMAINPATH.'raw/mp4/'.$hash; ?>" type="video/mp4">
                 <source src="<?php echo DOMAINPATH.'raw/webm/'.$hash; ?>" type="video/webm">
             </video>
-            <small><?php echo $filesize; ?></small>
+            <!--<small><?php echo $filesize; ?></small>-->
             
             <script>
                 var video = document.getElementById('video');
                 video.addEventListener('click',function(){
                     video.play();
                 },false);
+                
+                var $video  = $('video'),
+                    $window = $(window); 
+                
+                $(window).resize(function(){
+                    var height = $window.height();
+                    $video.css('height', height);
+                
+                    var videoWidth = $video.width(),
+                        windowWidth = $window.width(),
+                    marginLeftAdjust =   (windowWidth - videoWidth) / 2;
+                
+                    $video.css({
+                        'height': height, 
+                        'marginLeft' : marginLeftAdjust
+                    });
+                }).resize();
             </script>
 
-        </div>
+        
 
     </body>
 </html>
