Add progress bar hover and transition

Prevent click catch by Youtube iframe which block vlite click

README.md

@@ -1,4 +1,4 @@
-![vLitejs](https://img.shields.io/badge/vLitejs-v1.1.1-ffb300.svg?style=flat-square)
+![vLitejs](https://img.shields.io/badge/vLitejs-v1.1.2-ffb300.svg?style=flat-square)
 
 # vLite.js
 

css/vlite.css

@@ -147,6 +147,10 @@
   object-fit: cover;
 }
 
+.wrapper-vlite iframe.vlite-js {
+  pointer-events: none;
+}
+
 .wrapper-vlite.playing .poster, .wrapper-vlite.paused:not(.first-start) .poster {
   visibility: hidden;
   opacity: 0;
@@ -234,6 +238,10 @@
   background-color: rgba(0, 0, 0, 0.3);
 }
 
+.wrapper-vlite .control-bar:hover .progress-bar {
+  height: 8px;
+}
+
 .wrapper-vlite .control-bar .control-bar-inner {
   position: relative;
   width: 100%;
@@ -247,6 +255,8 @@
   right: 0;
   height: 3px;
   background-color: rgba(0, 0, 0, 0.2);
+  transition: height 100ms ease-out;
+  z-index: 1;
 }
 
 .wrapper-vlite .progress-bar .progress-input {
@@ -255,6 +265,7 @@
   left: 0;
   width: 100%;
   height: 100%;
+  margin: 0;
   cursor: pointer;
   opacity: 0;
 }
@@ -266,6 +277,8 @@
   width: 0;
   height: 100%;
   background-color: #fff;
+  border-radius: 0px 4px 4px 0px;
+  transition: all 100ms ease-out;
 }
 
 .wrapper-vlite .play-pause-button {
@@ -371,4 +384,4 @@
 
 .wrapper-vlite .fullscreen .icon-fullscreen:before {
   content: "\e901";
-}
+}

js/example.js

@@ -19,7 +19,7 @@ var playerHtml5 = new vLite({
         "fullscreen": true,
         "poster": "img/poster.jpg",
         "bigPlay": true,
-        "nativeControlsForTouch": true
+        "nativeControlsForTouch": false
     },
     callback: (player) => {
         //Ready