unify video element

content/models.py

@@ -217,6 +217,11 @@ class Content(models.Model):
                 subprocess.call(cmd)
             return self.photo.image.url.replace('.gif', '.mp4')
 
+    @cached_property
+    def video_gif(self):
+        html = '<video autoplay loop mouted playsinline src="%s" class="gif"></video>' % self.video_url
+        return mark_safe(html)
+
     @cached_property
     def image_url(self):
         if self.photo:

content/templates/content.html

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

content/templates/event_preview.html

@@ -17,7 +17,7 @@
         <div class="small-6 columns">
             <a href="{{ content.get_absolute_url }}">
                 {% if content.video_url %}
-                <video class="gif" autoplay loop src="{{ content.video_url }}"></video>
+                {{ content.video_gif }}
                 {% else %}
                 <img src="{{ content.image_url }}">
                 {% endif %}

content/templates/featured.html

@@ -1,7 +1,7 @@
 {% for content in featured %}
 <div class="large-8 medium-8 columns special-column">
     {% if content.video_url %}
-    <a href="{{ content.get_absolute_url }}"><video class="gif" autoplay loop src="{{ content.video_url }}"></video></a>
+    <a href="{{ content.get_absolute_url }}">{{ content.video_gif }}</a>
     {% elif content.image_url %}
     <a href="{{ content.get_absolute_url }}"><img src="{{ content.image_url }}"></a>
     {% endif %}

content/templates/preview.html

@@ -11,7 +11,7 @@
     {% else %}
     <div class="small-6 columns">
         {% if content.video_url %}
-        <a href="{{ content.get_absolute_url }}"><video class="gif" autoplay loop src="{{ content.video_url }}"></video></a>
+        <a href="{{ content.get_absolute_url }}">{{ content.video_gif }}</a>
         {% elif content.image_url %}
         <a href="{{ content.get_absolute_url }}"><img src="{{ content.image_url }}"></a>
         {% endif %}

content/templates/results.html

@@ -26,7 +26,7 @@
     <div class="row results">
         <div class="small-6 medium-4 medium-offset-2 large-2 large-offset-2 columns">
             {% if row.video_url %}
-            <a href="{{ row.get_absolute_url }}"><video class="gif" autoplay loop src="{{ row.video_url }}"></video></a>
+            <a href="{{ row.get_absolute_url }}">{{ row.video_gif }}</a>
             {% elif row.image_url %}
             <a href="{{ row.get_absolute_url }}"><img src="{{ row.image_url }}"></a>
             {% else %}

content/templates/section_index.html

@@ -12,7 +12,7 @@
                 {% if content.image_url %}
                 <div class="small-6 columns">
                     {% if content.video_url %}
-                    <video class="gif" autoplay loop src="{{ content.video_url }}"></video>
+                    {{ content.video_gif }}
                     {% elif content.image_url %}
                     <img src="{{ content.image_url }}">
                     {% endif %}