Use mp4 videos

diff --git a/docs/images/videos/blog.mp4 b/docs/images/videos/blog.mp4
new file mode 100644 (file)
index 0000000..5f0339c
Binary files /dev/null and b/docs/images/videos/blog.mp4 differ

diff --git a/docs/images/videos/blog.png b/docs/images/videos/blog.png
index e0a29796cc581e1ccf5ec9686388612a48aea2c9..bf01ed71e46f3b956866c2f845b216aa82ad8382 100644 (file)
Binary files a/docs/images/videos/blog.png and b/docs/images/videos/blog.png differ

diff --git a/docs/images/videos/slide.png b/docs/images/videos/slide.png
index 59dec34fd7f640821aaf64700895018555fbd955..02a6cdef35f12c3f8dff7642e576b3b93376e042 100644 (file)
Binary files a/docs/images/videos/slide.png and b/docs/images/videos/slide.png differ

diff --git a/docs/images/videos/tesla.mp4 b/docs/images/videos/tesla.mp4
new file mode 100644 (file)
index 0000000..c6b75da
Binary files /dev/null and b/docs/images/videos/tesla.mp4 differ

diff --git a/docs/images/videos/tesla.png b/docs/images/videos/tesla.png
index 228297acf3efdee0033021cc78395e1d25534565..eaa5c134c58fc71e8e81a2ab2acfca87aa07cca5 100644 (file)
Binary files a/docs/images/videos/tesla.png and b/docs/images/videos/tesla.png differ

diff --git a/docs/videos.html b/docs/videos.html
index d73d1e3a210851042e80bbb1d9428ac17ffe008b..2a119960fc8d0730098f510441b9aa2495c95c9b 100644 (file)
--- a/docs/videos.html
+++ b/docs/videos.html
@@ -23,7 +23,7 @@ videos:
   subtitle: 4 videos – 15 min
   content: Create web-based presentation slides with Bulma.
   video_url: https://scrimba.com/p/pV5eHk/cGym4Ta
-  no_gif: true
+  no_video: true
 ---
 
 {% include global/navbar.html id="Videos" %}
@@ -101,11 +101,12 @@ videos:
 
               <div class="column is-8 is-offset-1">
                 <a class="image" href="{{ video.video_url }}" target="_blank" rel="nofollow">
-                  {% if video.no_gif %}
+                  {% if video.no_video %}
                     <img src="/images/videos/{{ video.id }}.png" alt="{{ video.title }} screenshot">
                   {% else %}
-                    <img class="is-hidden-touch" src="/images/videos/{{ video.id }}.gif" alt="{{ video.title }} screenshot">
-                    <img class="is-hidden-desktop" src="/images/videos/{{ video.id }}.png" alt="{{ video.title }} screenshot">
+                    <video autoplay loop muted>
+                      <source media="(min-width: 640px)" src="/images/videos/{{ video.id }}.mp4">
+                    </video>
                     {% endif %}
                 </a>
               </div>