Merge pull request #216 from franek/photoswipe-support-video

implement a first version of video support for photoswipe theme.

docs/themes.rst

@@ -26,10 +26,7 @@ Sigal comes with three themes, located in the ``sigal/themes`` folder:
 
 **photoswipe**:
     `source <http://photoswipe.com/>`_, `demo
-    <http://saimon.org/sigal-demo/photoswipe/>`_.  The photoswipe
-    theme comes with some limitations : It does not support video (see
-    https://github.com/dimsemenov/PhotoSwipe/issues/651 for details). Video
-    support will be added when available.
+    <http://saimon.org/sigal-demo/photoswipe/>`_. 
 
 For developers, a Makefile is available to concatenate and minify the css
 files, using `cssmin <https://pypi.python.org/pypi/cssmin>`_ (``pip install

sigal/themes/photoswipe/static/styles.css

@@ -141,12 +141,14 @@ figcaption {
   height: 0;
   overflow: hidden;
 }
-.video__container iframe {
+.video__container iframe,
+.video__container video {
   position: absolute;
   top:0;
   left: 0;
   width: 100%;
   height: 100%;
+  padding: 2% 0 15% 0;
 }
 .video-desc {
   width: 100%;

sigal/themes/photoswipe/templates/index.html

@@ -81,6 +81,14 @@
 							    </figure>
 						    {% endif %}
 					    {% endif %}
+                        {% if media.type == "video" %}
+                            <figure class="gallery__img--secondary thumbnail" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
+                                <a href="{{ media.filename }}" itemprop="contentUrl" data-type="video" data-video='<div class="video"><div class="video__container"><video controls><source src="{{ media.filename }}" type="{{ media.mime }}" /></video></div></div>'>
+                                <img src="{{ theme.url }}/echo/blank.gif" data-echo="{{ media.thumbnail }}" alt="{{ media.thumbnail }}" itemprop="thumbnail" title="" />
+                                </a>
+                                <figcaption itemprop="caption description">{{ media_title }}</figcaption>
+                            </figure>
+                        {% endif %}
 				{% endfor %}
 			</div>
 		{% endif %}
@@ -198,16 +206,19 @@
 
 	            linkEl = figureEl.children[0]; // <a> element
 
-	            size = linkEl.getAttribute('data-size').split('x');
-
 	            // create slide object
-	            item = {
-	                src: linkEl.getAttribute('href'),
-	                w: parseInt(size[0], 10),
-	                h: parseInt(size[1], 10)
-	            };
-
-
+                if (linkEl.getAttribute('data-type') == 'video') {
+                    item = {
+                      html: linkEl.getAttribute('data-video')
+                    };
+                } else {
+                    size = linkEl.getAttribute('data-size').split('x');
+                    item = {
+                        src: linkEl.getAttribute('href'),
+                        w: parseInt(size[0], 10),
+                        h: parseInt(size[1], 10)
+                    };
+                }
 
 	            if(figureEl.children.length > 1) {
 	                // <figcaption> content