From c46ddda614a36db419b954cb57915423d81ce5a6 Mon Sep 17 00:00:00 2001
From: tungu <fabien.dutaud@gmail.com>
Date: Fri, 17 May 2019 00:17:28 +0200
Subject: [PATCH] Update README.md

---
 README.md | 99 ++++++++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 83 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index 629a57c..80418eb 100644
--- a/README.md
+++ b/README.md
@@ -1,57 +1,124 @@
+
 ![Preview](https://raw.githubusercontent.com/tunguskha/Image-shadow/master/assets/imgs/Preview.jpg)
-# Image shadow !
+
+# Image and video shadow !
 
 Simple and small Javascript script to display the shadow of the image!
 
+
 ---
 
-### Download Shadow-image
-```
+
+### Download
+
+```shell
 $ git clone https://github.com/tunguskha/Image-shadow
 ```
 
+
 ---
 
+
 ### Import
-Locally
+
+Locally, choose one
+
 ```html
-<script src="assets/js/image-shadow.js"></script>
+<!-- Image shadow only -->
+<script src="assets/js/image-shadow.min.js"></script>
+
+<!-- Video shadow only -->
+<script src="assets/js/video-shadow.min.js"></script>
+
+<!-- Both -->
+<script src="assets/js/image-video-shadow.min.js"></script>
+
+
 ```
-CDN
+
+
+CDN, choose one
+
 ```html
-<script src="https://cdn.jsdelivr.net/gh/tunguskha/Image-shadow@latest/assets/js/image-shadow.js"></script>
+<!-- Image shadow only -->
+<script src="https://cdn.jsdelivr.net/gh/tunguskha/Image-shadow@latest/assets/js/image-shadow.min.js"></script>
+
+<!-- Video shadow only -->
+<script src="https://cdn.jsdelivr.net/gh/tunguskha/Image-shadow@latest/assets/js/video-shadow.min.js"></script>
+
+<!-- Both -->
+<script src="https://cdn.jsdelivr.net/gh/tunguskha/Image-shadow@latest/assets/js/image-video-shadow.min.js"></script>
+
 ```
 
+
 ---
 
+
 ### Use it
-All you need is .ishadow wrapper to the image and blur value in data attribute
+
+All you need is `.ishadow` wrapper to the image and blur value in data attribute
+
 ```html
 <div class="ishadow">
-  <img 
-	data-blur="20" 
-	src="assets/imgs/halt-and-catch-fire.jpg">
+  <img data-blur="20" src="your-image.jpg">
 </div>
 ```
 
 Also, you can make an element hoverable by adding `data-hover="true"`.
+
 `false` by default
+
+```html
+<div class="ishadow">
+  <img data-blur="20" data-hover="true" src="your-image.jpg">
+</div>
+```
+If you use a lazy-loading script, srcset is supported.
 ```html
 <div class="ishadow">
-  <img 
-	data-blur="20" 
-	data-hover="true" 
-	src="assets/imgs/halt-and-catch-fire.jpg">
+  <img data-blur="20" srcset="your-image.jpg">
+</div>
+```
+
+
+---
+
+
+### For video, it's a bit different
+You also need a wrapper, called `.v-shadow`.
+Inside, import your video, control the blur like image-shadow, and dont forget to add a `.v-clone` class.
+
+To work well, and control the shadow at the same time that the video is played, we have to clone it, and this is where the clone will be. 
+
+This may impact the performance of the site, which should be used with caution.
+
+```html
+<div class="v-shadow">
+
+  <video data-blur="20" controls>
+    <source src="your-video.webm">
+  </video>
+	
+  <div class="v-clone"></div>
+	
 </div>
 ```
+
+
 ---
 
+
 ### Support
+
 | IE | Edge| Firefox | Chrome | Safari | Opera |
 |:-:|:--:|:-:|:-:|:-:|:-:|
 |:x:| :x: |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|
 
+
 ---
 
+
 ### See it live
-[Image-shadow](https://tunguskha.github.io/Image-shadow/)
+
+[Image-shadow](https://tunguskha.github.io/Image-shadow/)
\ No newline at end of file