replace gifs with videos

elections/migrations/0018_alter_electionshomepage_content.py

 # Generated by Django 4.1.10 on 2024-01-19 16:39
 
-from django.db import migrations
 import wagtail.blocks
 import wagtail.fields
 import wagtail.images.blocks
+from django.db import migrations
 
 
 class Migration(migrations.Migration):

shared/templates/styleguide2/includes/molecules/menus/carousel.html

@@ -14,37 +14,51 @@
         href="{{ self.button_url }}"
       {% endif %}
     >
-      <img
+      <video
         class="
           header-carousel--image
           lg:hidden
         "
+        autoplay
+        muted
+        loop
+        playsinline
+        preload="metadata"
 
         {% if not self.mobile_image %}
-          src="{% static 'styleguide2/images/background-images/bg-flag-mobile.gif' %}"
+          poster="{% static 'styleguide2/images/background-images/bg-flag-mobile-preview.jpg' %}"
         {% else %}
           {% image self.mobile_image original as mobile_background_image %}
-          src="{{ mobile_background_image.url }}"
+          poster="{{ mobile_background_image.url }}"
         {% endif %}
-
-        draggable="false"
       >
+        {% if not self.mobile_image %}
+          <source src="{% static 'styleguide2/images/background-images/bg-flag-mobile.mp4' %}">
+        {% endif %}
+      </video>
 
-      <img
+      <video
         class="
           header-carousel--image
           hidden lg:block
         "
+        autoplay
+        muted
+        loop
+        playsinline
+        preload="metadata"
 
         {% if not self.desktop_image %}
-          src="{% static 'styleguide2/images/background-images/bg-flag.webp' %}"
+          poster="{% static 'styleguide2/images/background-images/bg-flag-preview.jpg' %}"
         {% else %}
           {% image self.desktop_image original as desktop_background_image %}
-          src="{{ desktop_background_image.url }}"
+          poster="{{ desktop_background_image.url }}"
         {% endif %}
-
-        draggable="false"
       >
+        {% if not self.desktop_image %}
+          <source src="{% static 'styleguide2/images/background-images/bg-flag.mp4' %}">
+        {% endif %}
+      </video>
 
       <div class="header-carousel--text-wrapper" style="box-sizing: border-box">
         <div class="container--wide px-0 h-full flex flex-col justify-end items-start" style="box-sizing: border-box">