play inline video

camp/static/css/foundation.css

@@ -447,7 +447,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale; }
 
-img {
+img, video.gif {
   display: inline-block;
   vertical-align: middle;
   max-width: 100%;

content/models.py

@@ -169,6 +169,35 @@ class Content(models.Model):
         values = [
             ('og:title', self.title),
         ]
+        video_url = self.video_url
+        if video_url:
+            video_path = self.photo.image.path.replace('.gif', '.mp4')
+            image_path = self.photo.image.path.replace('.gif', '.jpg')
+            if os.path.exists(video_path):
+                if video_url.startswith('/'):
+                    video_url = 'https://studio.camp' + video_url
+                image_url = video_url.replace('.mp4', '.jpg')
+                width = self.photo.image.width
+                height = self.photo.image.height
+                values = [
+                    ('og:video', video_url),
+                    ('og:video:type', "video/mp4"),
+                    ('og:video:width', str(width)),
+                    ('og:video:height', str(height)),
+                    ('og:image', image_url),
+                ] + values
+        else:
+            values += [
+                ('og:image', 'https://studio.camp%s' % self.image_url),
+            ]
+        for key, value in values:
+            headers.append(
+                '<meta property="%s" content="%s"/>' % (html.escape(key, True), html.escape(value, True))
+            )
+        return mark_safe("\n".join(headers))
+
+    @cached_property
+    def video_url(self):
         if self.photo and self.photo.image.url.endswith('.gif'):
             video_path = self.photo.image.path.replace('.gif', '.mp4')
             image_path = self.photo.image.path.replace('.gif', '.jpg')
@@ -186,30 +215,7 @@ class Content(models.Model):
                     '-i', self.photo.image.path, '-frames:v', '1', image_path
                 ]
                 subprocess.call(cmd)
-            if os.path.exists(video_path):
-                video_url = self.photo.image.url.replace('.gif', '.mp4')
-                if video_url.startswith('/'):
-                    video_url = 'https://studio.camp' + video_url
-                image_url = video_url.replace('.mp4', '.jpg')
-                width = self.photo.image.width
-                height = self.photo.image.height
-                values = [
-                    ('og:video', video_url),
-                    ('og:video:type', "video/mp4"),
-                    ('og:video:width', str(width)),
-                    ('og:video:height', str(height)),
-                    ('og:image', image_url),
-                ] + values
-        else:
-            values += [
-                ('og:image', 'https://studio.camp%s' % self.image_url),
-            ]
-
-        for key, value in values:
-            headers.append(
-                '<meta property="%s" content="%s"/>' % (html.escape(key, True), html.escape(value, True))
-            )
-        return mark_safe("\n".join(headers))
+            return video_url
 
     @cached_property
     def image_url(self):

content/templates/content.html

@@ -6,7 +6,9 @@
 {% block content %}
     {% include "edit.html" %}
     <div class="large-8 medium-8 columns special-column">
-        {% if content.image_url %}
+        {% if content.video_url %}
+        <video class="gif" autoplay loop src="{{ content.video_url }}"></video>
+        {% else content.image_url %}
         <img src="{{ content.image_url }}">
         {% endif %}
         <div class="index-text">