diff --git a/example/build/first_gallery/index.html b/example/build/first_gallery/index.html
index 151eb18..2eb1195 100644
--- a/example/build/first_gallery/index.html
+++ b/example/build/first_gallery/index.html
@@ -17,6 +17,9 @@
         
         
 
+
+
+
 <section class="full-picture" style="background: transparent url('stuff.png') no-repeat scroll center top / cover;">
     
     <div class="picture-text">
@@ -31,39 +34,104 @@
     </div>
     
 </section>
-        
-        
-
-
-
-<section class="bordered-picture baguette">
-    <div class="caption">
-        <a href="stuff.png ">
-            <img src="stuff.png">
-            
-    </div>
-        </a>
-</section>
-
 
         
         
 
 
 
-<section class="bordered-picture baguette">
-    <div class="caption">
-        <a href="stuff.png data-caption="plop"">
-            <img src="stuff.png">
-            
-            <div class="caption__overlay">
-                <h5 class="caption__overlay__title">plop</h5>
+<section class="full-picture">
+    <div class="video-container">
+        
+        <div class="title-container">
+            <div class="headline">
+                <h1>Beautiful Title</h1>
+                <h2>pouet pouet</h2>
+                
+                
+                <div class="datetime">08 December 2015</div>
+                
             </div>
-            
+        </div>
+        
+        <video autoplay loop muted class="fillWidth">
+            <source src="video.mp4" type="video/webm" data-source="video.mp4" data-format="vp8" data-extension="webm">
+        </video>
+        <img class="lazy" src="video.-2000.png">
     </div>
-        </a>
 </section>
 
+        
+        
+
+
+
+        
+    <section class="bordered-picture baguette" style="position: relative;">
+        <img class="lazy" data-original="video.-2000.png" src="video.-2000.png" alt="">
+        <video class="lazy" id="video" poster="video.-2000.png" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
+            <source src="video.mp4" type="video/webm" data-source="video.mp4" data-format="vp8" data-extension="webm">
+        </video>
+        
+    </section>
+    
+
+        
+        
+
+
+
+
+
+        
+    <section class="bordered-picture baguette">
+        <div class="caption">
+            <a href="stuff.png ">
+                <img class="lazy" src="stuff.png" data-original="stuff.png" alt="">
+                
+        </div>
+            </a>
+            
+    </section>
+    
+
+        
+        
+
+
+
+        
+    <section class="bordered-picture baguette" style="position: relative;">
+        <img class="lazy" data-original="video.-2000.png" src="video.-2000.png" alt="">
+        <video class="lazy" id="video" poster="video.-2000.png" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
+            <source src="video.mp4" type="video/webm" data-source="video.mp4" data-format="vp8" data-extension="webm">
+        </video>
+        
+    </section>
+    
+
+        
+        
+
+
+
+
+
+        
+    <section class="bordered-picture baguette">
+        <div class="caption">
+            <a href="stuff.png data-caption="plop"">
+                <img class="lazy" src="stuff.png" data-original="stuff.png" alt="">
+                
+                <div class="caption__overlay">
+                    <h5 class="caption__overlay__title">plop</h5>
+                </div>
+                
+        </div>
+            </a>
+            
+    </section>
+    
 
         
         
@@ -73,22 +141,123 @@
 
         
         
-<section class="pictures-group baguette">
+    <section class="pictures-group baguette">
+        
+        <div class="pictures-line">
+            
+            
+            
+            
+            
+            
+            <div class="picture caption">
+                
+                <a href="stuff.png" data-caption="test">
+                    <img class="lazy" src="stuff.-x600.png" data-original="stuff.-x600.png" alt="">
+                    
+                    <div class="caption__overlay">
+                        <h5 class="caption__overlay__title">test</h5>
+                    </div>
+                    
+                </a>
+                
+            </div>
+            
+            <div class="separator"></div>
+            
+            
+            
+            
+            
+            
+            <div class="picture caption">
+                
+                <img class="lazy" data-original="video.-600.png" src="video.-600.png"alt="">
+                <video class="lazy" id="video" poster="video.-600.png" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
+                    <source src="video.mp4" type="video/webm" data-source="video.mp4" data-format="vp8" data-extension="webm">
+                </video>
+                
+            </div>
+            
+            <div class="separator"></div>
+            
+            
+            
+            
+            
+            
+            
+            <div class="picture caption">
+                
+                <img class="lazy" data-original="video.-600.png" src="video.-600.png"alt="">
+                <video class="lazy" id="video" poster="video.-600.png" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
+                    <source src="video.mp4" type="video/webm" data-source="video.mp4" data-format="vp8" data-extension="webm">
+                </video>
+                
+            </div>
+            
+            
+        </div>
+        
+        <div class="pictures-line">
+            
+            
+            
+            
+            
+            
+            <div class="picture caption">
+                
+                <a href="stuff.png" >
+                    <img class="lazy" src="stuff.-x600.png" data-original="stuff.-x600.png" alt="">
+                    
+                </a>
+                
+            </div>
+            
+            <div class="separator"></div>
+            
+            
+            
+            
+            
+            
+            <div class="picture caption">
+                
+                <img class="lazy" data-original="video.-600.png" src="video.-600.png"alt="">
+                <video class="lazy" id="video" poster="video.-600.png" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
+                    <source src="video.mp4" type="video/webm" data-source="video.mp4" data-format="vp8" data-extension="webm">
+                </video>
+                
+            </div>
+            
+            
+        </div>
+        
+    </section>
     
+        
+        
+    <section class="pictures-group baguette">
+        
         <div class="pictures-line">
             
             
             
             
+            
+            
             <div class="picture caption">
+                
                 <a href="stuff.png" data-caption="test">
-                    <img src="stuff-x600.png">
+                    <img class="lazy" src="stuff.-x600.png" data-original="stuff.-x600.png" alt="">
                     
                     <div class="caption__overlay">
                         <h5 class="caption__overlay__title">test</h5>
                     </div>
                     
                 </a>
+                
             </div>
             
             <div class="separator"></div>
@@ -97,15 +266,19 @@
             
             
             
+            
+            
             <div class="picture caption">
+                
                 <a href="stuff.png" data-caption="test">
-                    <img src="stuff-x600.png">
+                    <img class="lazy" src="stuff.-x600.png" data-original="stuff.-x600.png" alt="">
                     
                     <div class="caption__overlay">
                         <h5 class="caption__overlay__title">test</h5>
                     </div>
                     
                 </a>
+                
             </div>
             
             <div class="separator"></div>
@@ -114,15 +287,19 @@
             
             
             
+            
+            
             <div class="picture caption">
+                
                 <a href="stuff.png" data-caption="test">
-                    <img src="stuff-x600.png">
+                    <img class="lazy" src="stuff.-x600.png" data-original="stuff.-x600.png" alt="">
                     
                     <div class="caption__overlay">
                         <h5 class="caption__overlay__title">test</h5>
                     </div>
                     
                 </a>
+                
             </div>
             
             
@@ -133,11 +310,15 @@
             
             
             
+            
+            
             <div class="picture caption">
+                
                 <a href="stuff.png" >
-                    <img src="stuff-x600.png">
+                    <img class="lazy" src="stuff.-x600.png" data-original="stuff.-x600.png" alt="">
                     
                 </a>
+                
             </div>
             
             <div class="separator"></div>
@@ -146,24 +327,47 @@
             
             
             
+            
+            
             <div class="picture caption">
+                
                 <a href="stuff.png" >
-                    <img src="stuff-x600.png">
+                    <img class="lazy" src="stuff.-x600.png" data-original="stuff.-x600.png" alt="">
                     
                 </a>
+                
             </div>
             
             
         </div>
         
-</section>
+    </section>
+    
+        
+        
+
+
 
-        
-        
 
 <section class="full-picture" style="background: transparent url('stuff.png') no-repeat scroll center top / cover;">
     
 </section>
+
+        
+        
+
+
+
+<section class="full-picture">
+    <div class="video-container">
+        
+        <video autoplay loop muted class="fillWidth">
+            <source src="video.mp4" type="video/webm" data-source="video.mp4" data-format="vp8" data-extension="webm">
+        </video>
+        <img class="lazy" src="video.-2000.png">
+    </div>
+</section>
+
         
 
         
@@ -171,7 +375,7 @@
         <div class="back-to-home">
             <hr>
             <a href="../">
-                <div id="logo" src="./../static/img/logo.svg"/>
+                <div id="logo" src="./../static/img/logo.svg">
                     HOME
                 </div>
             </a>
@@ -180,7 +384,8 @@
         <script type="text/javascript" src="../static/js/jquery-2.1.4.min.js" charset="utf-8"></script>
         <script type="text/javascript" src="../static/js/baguetteBox.min.js" charset="utf-8"></script>
         <script type="text/javascript" src="../static/js/jquery.panorama_viewer.min.js" charset="utf-8"></script>
-        <script type="text/javascript" charset="utf-8">
+        <script type="text/javascript" src="../static/js/jquery.lazyload.min.js" charset="utf-8"></script>
+        <script type="text/javascript">
 $(function() {
     baguetteBox.run(".baguette", {});
     $(".panorama").panorama_viewer({
@@ -191,6 +396,31 @@ $(function() {
         overlay: true
     });
 });
+
+var video = $("video.lazy");
+video.on('click', function(e){
+    var vid = video[0];
+    vid.play();
+    if (vid.requestFullscreen) {
+        vid.requestFullscreen();
+    } else if (vid.mozRequestFullScreen) {
+        vid.mozRequestFullScreen();
+    } else if (vid.webkitRequestFullscreen) {
+        vid.webkitRequestFullscreen();
+    }
+});
+
+$(function() {
+    $("img.lazy").lazyload({
+        effect : "fadeIn"
+    });
+    $("video.lazy").lazyload({
+        effect : "fadeIn"
+    });
+    $("section.lazy").lazyload({
+        effect : "fadeIn"
+    });
+});
         </script>
 
         
diff --git a/example/build/index.html b/example/build/index.html
index 200e345..b9f6398 100644
--- a/example/build/index.html
+++ b/example/build/index.html
@@ -38,7 +38,7 @@
       </a>
       
       
-      <div class="gallery-cover" style="background-image: url('first_gallery/stuff-x900.png');"></div>
+      <div class="gallery-cover" style="background-image: url('first_gallery/stuff.-x900.png');"></div>
     </div><!-- comment tricks against space between inline-block
     -->
   </div>
diff --git a/example/build/static/css/style-page.css b/example/build/static/css/style-page.css
index cedb963..ca17c42 100644
--- a/example/build/static/css/style-page.css
+++ b/example/build/static/css/style-page.css
@@ -9,11 +9,12 @@ body {
     width: 100%;
     background-color: #FBFBFB;
     color: black;
-    margin: 0;
+    margin: 0px;
 }
 
 section {
     margin-bottom: 80px;
+    margin-top: 40px;
 }
 
 a {
@@ -27,6 +28,7 @@ a {
     height: 100%;
     width: 100%;
     min-height: 250px;
+    margin-top: 0;
 }
 
 .full-picture > .picture-text {
@@ -90,7 +92,6 @@ a {
 
 .pictures-line .picture img {
     width: 100%;
-    height: 100%;
 }
 
 .pictures-line .separator {
@@ -336,3 +337,67 @@ a.google {
     line-height: normal;
     color: #333;
 }
+
+.bordered-picture video,
+.picture video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    width: 100%;
+    height: auto;
+}
+
+.full-picture video {
+    position: fixed; right: 0; bottom: 0;
+    min-width: 100%; min-height: 100%;
+    width: auto; height: auto; z-index: -100;
+    background-size: cover;
+}
+
+.bordered-picture video {
+    width: 77%;
+    margin-left: 11.5%;
+    margin-right: 11.5%;
+}
+
+.bg-section {
+    padding: 1px 0px;
+}
+
+.bg-section section {
+    margin-bottom: 40px;
+    margin-top: 40px;
+}
+
+.video-container {
+  position: relative;
+  bottom: 0%;
+  left: 0%;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  background: #000;
+}
+
+.video-container .title-container {
+  z-index: 1000;
+  position: absolute;
+  background-color: rgba(0, 0, 0, .4);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  color: white;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.video-container video {
+  position: absolute;
+  z-index: 0;
+  bottom: 0;
+}
+.video-container video.fillWidth {
+  width: 100%;
+}
diff --git a/example/first_gallery/settings.yaml b/example/first_gallery/settings.yaml
index 9387b2a..a551c80 100644
--- a/example/first_gallery/settings.yaml
+++ b/example/first_gallery/settings.yaml
@@ -9,13 +9,43 @@ sections:
       title: Beautiful Title
       sub_title: pouet pouet
       date: 2015-12-08
+  - type: full-picture
+    image:
+      name: video.mp4
+      type: video
+    text:
+      title: Beautiful Title
+      sub_title: pouet pouet
+      date: 2015-12-08
+  - type: bordered-picture
+    image:
+      name: video.mp4
+      type: video
   - type: bordered-picture
     image: stuff.png
+  - type: bordered-picture
+    image:
+      name: video.mp4
+      type: video
+    text: "plop"
   - type: bordered-picture
     image: stuff.png
     text: "plop"
   - type: text
     text: « voici plein de blabla à rajouter et <b>ceci est du gras</b> et encore plein plein plein plein de text car je veux voir comment ça va wrapper car c'est important et il faut pas que j'oublie de mettre des margins en % sinon ça va pas le faire alala là ça devrait aller »
+  - type: pictures-group
+    images:
+      -
+        - name: stuff.png
+          text: "test"
+        - name: video.mp4
+          type: video
+        - name: stuff.png
+          text: "test"
+      -
+        - stuff.png
+        - name: video.mp4
+          type: video
   - type: pictures-group
     images:
       -
@@ -30,3 +60,7 @@ sections:
         - stuff.png
   - type: full-picture
     image: stuff.png
+  - type: full-picture
+    image:
+      name: video.mp4
+      type: video
diff --git a/prosopopee/prosopopee.py b/prosopopee/prosopopee.py
index 505138f..0f21bbd 100644
--- a/prosopopee/prosopopee.py
+++ b/prosopopee/prosopopee.py
@@ -293,8 +293,8 @@ def main():
                 "cover": cover_image_path,
             })
 
-            if not os.path.exists(os.path.join("build", gallery)):
-                os.makedirs(os.path.join("build", gallery))
+        if not os.path.exists(os.path.join("build", gallery)):
+            os.makedirs(os.path.join("build", gallery))
 
         # this should probably be a factory
         Image.base_dir = os.path.join(os.getcwd(), gallery)