Add the film out screen and begin styling.

app/css/app.css

@@ -739,6 +739,21 @@ button:focus {
   background: black;
   color: #fff;
 }
+#video_preview_wrap {
+  background: #000;
+  width: 100%;
+}
+#video_preview {
+  height: 400px;
+  min-height: 400px;
+  width: auto;
+  margin: 0 auto;
+  display: block;
+  opacity: 0;
+}
+#video_preview .on {
+  opacity: 1;
+}
 #screens {
   overflow-x: hidden;
 }

app/index.html

@@ -345,11 +345,15 @@
       <div id="video" class="screen">
         <div>
           <div>
+            <div id="path_bar">
               <input id="video_file" type="text" onclick="devices.digitalSelect();" readonly  />
+            </div>
+            <div id="video_preview_wrap">
               <img src="#" id="video_preview">
             </div>
           </div>
         </div>
+      </div>
       <div id="settings" class="screen">
         <div>
           <div>

app/less/app.less

@@ -8,7 +8,7 @@
 @import "./scroll.less";
 @import "./settings.less";
 @import "./mscript.less";
-
+@import "./video.less";
 
 #screens{
 	overflow-x: hidden;