From 5fd7b89ca9d21f72c9dc2558b532513b8fd2b21c Mon Sep 17 00:00:00 2001
From: Adrien Beudin <beudbeud@beudibox.fr>
Date: Sat, 30 Apr 2016 10:24:37 +0200
Subject: [PATCH] bordered video

---
 .../themes/exposure/static/css/style-page.css |  7 ++++
 .../templates/sections/bordered-picture.html  | 41 ++++++++++++-------
 .../themes/material/static/css/styles.css     |  7 ++++
 .../templates/sections/bordered-picture.html  | 38 +++++++++++------
 .../templates/sections/pictures-group.html    |  2 +-
 5 files changed, 66 insertions(+), 29 deletions(-)

diff --git a/prosopopee/themes/exposure/static/css/style-page.css b/prosopopee/themes/exposure/static/css/style-page.css
index 7dd1cef..635c784 100644
--- a/prosopopee/themes/exposure/static/css/style-page.css
+++ b/prosopopee/themes/exposure/static/css/style-page.css
@@ -338,6 +338,7 @@ a.google {
     color: #333;
 }
 
+.bordered-picture video,
 .picture video {
     position: absolute;
     top: 0;
@@ -347,6 +348,12 @@ a.google {
     height: auto;
 }
 
+.bordered-picture video {
+    width: 77%;
+    margin-left: 11.5%;
+    margin-right: 11.5%;
+}
+
 .bg-section {
     padding: 1px 0px;
 }
diff --git a/prosopopee/themes/exposure/templates/sections/bordered-picture.html b/prosopopee/themes/exposure/templates/sections/bordered-picture.html
index bc6ef98..7763842 100644
--- a/prosopopee/themes/exposure/templates/sections/bordered-picture.html
+++ b/prosopopee/themes/exposure/templates/sections/bordered-picture.html
@@ -1,22 +1,33 @@
+{% if section.image.type == "video" %}
+{% set video = Video(section.image) %}
+{% else %}
 {% set image = Image(section.image) %}
 {% set caption = section.text %}
-{{ image.copy()}}
-{% if section.background %}
-<div style="padding: 1px 0px;background: {{ section.background }};">
+{{ image.copy() }}
 {% endif %}
-<section class="bordered-picture baguette">
-    <div class="caption">
-        <a href="{{ image }} {% if caption %}data-caption="{{ caption }}"{% endif %}">
-            <img src="{{ image }}">
-            {% if caption %}
-            <div class="caption__overlay">
-                <h5 class="caption__overlay__title">{{ caption }}</h5>
-            </div>
-            {% endif %}
-    </div>
-        </a>
-</section>
 {% if section.background %}
+<div class="bg-section" style="background: {{ section.background }};">
+    {% endif %}
+    <section class="bordered-picture baguette">
+        {% if video %}
+        <img class="lazy" src="{{ video.generate_thumbnail("600") }}">
+        <video class="lazy" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
+            <source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
+        </video>
+        {% else %}
+        <div class="caption">
+            <a href="{{ image }} {% if caption %}data-caption="{{ caption }}"{% endif %}">
+                <img class="lazy" data-original="{{ image }}">
+                {% if caption %}
+                <div class="caption__overlay">
+                    <h5 class="caption__overlay__title">{{ caption }}</h5>
+                </div>
+                {% endif %}
+        </div>
+            </a>
+            {% endif %}
+    </section>
+    {% if section.background %}
 </div>
 {% endif %}
 
diff --git a/prosopopee/themes/material/static/css/styles.css b/prosopopee/themes/material/static/css/styles.css
index d92001a..05b0d55 100644
--- a/prosopopee/themes/material/static/css/styles.css
+++ b/prosopopee/themes/material/static/css/styles.css
@@ -127,6 +127,7 @@ main {
     height: 100%;
 }
 
+.bordered-picture video,
 .picture video {
     position: absolute;
     top: 0;
@@ -136,6 +137,12 @@ main {
     height: auto;
 }
 
+.bordered-picture video {
+    width: 77%;
+    margin-left: 11.5%;
+    margin-right: 11.5%;
+}
+
 div#bg-section {
     padding: 1px 0px;
 }
diff --git a/prosopopee/themes/material/templates/sections/bordered-picture.html b/prosopopee/themes/material/templates/sections/bordered-picture.html
index b227bf4..0fac7ee 100644
--- a/prosopopee/themes/material/templates/sections/bordered-picture.html
+++ b/prosopopee/themes/material/templates/sections/bordered-picture.html
@@ -1,19 +1,31 @@
+{% if section.image.type == "video" %}
+{% set video = Video(section.image) %}
+{% else %}
 {% set image = Image(section.image) %}
 {% set caption = section.text %}
-{{ image.copy()}}
+{{ image.copy() }}
+{% endif %}
 {% if section.background %}
 <div style="padding: 1px 0px;background: {{ section.background }};">
-{% endif %}
-<div class="bordered-picture baguette caption">
-    <a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}>
-        <img class="responsive-img" src="{{ image.generate_thumbnail("x2000") }}">
-        {% if caption %}
-        <div class="caption__overlay card-panel center">
-            <h5 class="black-white">{{ caption }}</h5>
-        </div>
-        {% endif %}
-    </a>
-</div>
-{% if section.background %}
+	{% endif %}
+	<div class="bordered-picture baguette caption">
+		{% if video %}
+		<img class="lazy" src="{{ video.generate_thumbnail("600") }}">
+		<video class="lazy" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted="">
+			<source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
+		</video>
+		{% else %}
+		<a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}>
+			<img class="responsive-img" src="{{ image.generate_thumbnail("x2000") }}">
+			{% if caption %}
+			<div class="caption__overlay card-panel center">
+				<h5 class="black-white">{{ caption }}</h5>
+			</div>
+			{% endif %}
+		</a>
+		{% endif %}
+	</div>
+	{% if section.background %}
 </div>
 {% endif %}
+
diff --git a/prosopopee/themes/material/templates/sections/pictures-group.html b/prosopopee/themes/material/templates/sections/pictures-group.html
index dd84510..d3cfc7a 100644
--- a/prosopopee/themes/material/templates/sections/pictures-group.html
+++ b/prosopopee/themes/material/templates/sections/pictures-group.html
@@ -19,7 +19,7 @@
                         {% if video %}
                         <div class="picture card-image">
                             <img class="lazy" src="{{ video.generate_thumbnail("600") }}">
-                            <video class="lazy" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
+                            <video class="lazy" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted="">
                                 <source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
                             </video>
                         </div>