diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css
index 399b9418..23d5be22 100644
--- a/source/Ox.UI/css/Ox.UI.css
+++ b/source/Ox.UI/css/Ox.UI.css
@@ -2189,6 +2189,9 @@ Video
     position: absolute;
     height: 72px;
 }
+.OxLargeVideoTimeline > div.OxOverlay {
+    z-index: 8;
+}
 .OxLargeVideoTimeline > div > img {
     position: absolute;
     top: 4px;
@@ -2199,7 +2202,7 @@ Video
     width: 6px;
     height: 6px;
     margin-left: -3px;
-    z-index: 8;
+    z-index: 7;
 }
 .OxLargeVideoTimeline .OxMarkerPointIn {
     position: absolute;
@@ -2207,14 +2210,14 @@ Video
     width: 7px;
     height: 7px;
     margin-left: -6px;
-    z-index: 8;
+    z-index: 9;
 }
 .OxLargeVideoTimeline .OxMarkerPointOut {
     position: absolute;
     top: 63px;
     width: 7px;
     height: 7px;
-    z-index: 8;
+    z-index: 9;
 }
 .OxLargeVideoTimeline .OxMarkerPosition {
     position: absolute;
@@ -2222,7 +2225,7 @@ Video
     width: 11px;
     height: 11px;
     margin-left: -5px;
-    z-index: 8;
+    z-index: 9;
 }
 .OxLargeVideoTimeline .OxSubtitle {
     position: absolute;
@@ -2239,7 +2242,7 @@ Video
     color: rgb(255, 255, 255);
     cursor: default;
     overflow: hidden;
-    z-index: 8;
+    z-index: 7;
     -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
     -o-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
     -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
diff --git a/source/Ox.UI/js/Video/LargeVideoTimeline.js b/source/Ox.UI/js/Video/LargeVideoTimeline.js
index 35e3bcbe..866f61c6 100644
--- a/source/Ox.UI/js/Video/LargeVideoTimeline.js
+++ b/source/Ox.UI/js/Video/LargeVideoTimeline.js
@@ -21,6 +21,7 @@ Ox.LargeVideoTimeline = function(options, self) {
                 matches: [],
                 out: 0,
                 position: 0,
+                showInToOut: false,
                 subtitles: [],
                 type: '',
                 width: 0
@@ -64,6 +65,28 @@ Ox.LargeVideoTimeline = function(options, self) {
 
     setSubtitles();
 
+    if (self.options.showInToOut) {
+        if (self.options['in']) {
+            $('<div>')
+                .addClass('OxOverlay')
+                .css({
+                    left: 0,
+                    width: self.options['in'] * self.fps + 'px',
+                })
+                .appendTo(self.$timeline);
+        }
+        if (self.options.out) {
+            $('<div>')
+                .addClass('OxOverlay')
+                .css({
+                    left: self.options.out * self.fps + 'px',
+                    width: (self.options.duration - self.options.out) * self.fps + 'px',
+                    height: self.height + 'px',
+                })
+                .appendTo(self.$timeline);
+        }
+    }
+
     self.options.cuts.forEach(function(v, i) {
         self.$cuts[i] = $('<img>')
             .addClass('OxCut')