Add mp4 and embeded video to figure.html

_includes/figure.html

@@ -1,36 +1,71 @@
-{%- assign img_path = include.path | remove: ".jpg" | remove: ".jpeg" | remove: ".png" | remove: ".tiff" -%}
-
 <figure>
+{% if include.path contains 'youtu.be' or include.path contains 'youtube.com' %}
+
+  <div {% if include.class %}class="{{ include.class }}"{% endif %}>
+    <iframe src="{{ include.path }}" 
+      allowfullscreen
+    ></iframe>
+  </div>
+
+  {% if include.caption -%}
+    <figcaption class="caption">{{ include.caption }}</figcaption>
+  {%- endif %}
+
+{% else %}
 
   <picture>
-    {% if site.imagemagick.enabled %}
-    {% for i in site.imagemagick.widths -%}
-      <source 
-        class="responsive-img-srcset"
-        media="(max-width: {{ i }}px)" 
-        srcset="{{ img_path | relative_url }}-{{ i }}.webp"
-      />
-    {% endfor -%}
-    {% endif %}
+    <!-- If file is mp4 use video container -->
+    {% if include.path contains '.mp4' %}
+      {%- assign media_path = include.path | remove: ".mp4" -%}
+      <video 
+        src="{{ include.path | relative_url }}" 
+        {% if include.class %}class="{{ include.class }}"{% endif %}  
+        {% if include.width %}width="{{ include.width }}"{% else %}width="auto"{% endif %} 
+        {% if include.height %}height="{{ include.height }}"{% else %}height="auto"{% endif %} 
+        {% if include.min-width %}min-width="{{ include.min-width }}"{% endif %} 
+        {% if include.min-height %}min-height="{{ include.min-height }}"{% endif %} 
+        {% if include.max-width %}max-width="{{ include.max-width }}"{% endif %} 
+        {% if include.max-height %}height="{{ include.max-height }}"{% endif %} 
+        {% if include.title %}title="{{ include.title }}"{% endif %} 
+        {% if include.controls %}controls{% endif %} 
+        {% if include.loop %}loop{% endif %}
+      ></video>
 
-    <!-- Fallback to the original file -->
-    <img 
-      src="{{ include.path | relative_url }}"
-      {% if include.class %}class="{{ include.class }}"{% endif %}  
-      {% if include.width %}width="{{ include.width }}"{% else %}width="auto"{% endif %} 
-      {% if include.height %}height="{{ include.height }}"{% else %}height="auto"{% endif %} 
-      {% if include.min-width %}min-width="{{ include.min-width }}"{% endif %} 
-      {% if include.min-height %}min-height="{{ include.min-height }}"{% endif %} 
-      {% if include.max-width %}max-width="{{ include.max-width }}"{% endif %} 
-      {% if include.max-height %}height="{{ include.max-height }}"{% endif %} 
-      {% if include.alt %}alt="{{ include.alt }}"{% endif %} 
-      {% if include.title %}title="{{ include.title }}"{% endif %} 
-      {% if include.zoomable %}data-zoomable{% endif %}
-      onerror="this.onerror=null; $('.responsive-img-srcset').remove();"
-    />
+    {% else %}
 
-  </picture>
+      <!-- Display image -->
+      {%- assign img_path = include.path | remove: ".jpg" | remove: ".jpeg" | remove: ".png" | remove: ".tiff" -%}
+
+      {% if site.imagemagick.enabled %}
+        {% for i in site.imagemagick.widths -%}
+          <source 
+            class="responsive-img-srcset"
+            media="(max-width: {{ i }}px)" 
+            srcset="{{ img_path | relative_url }}-{{ i }}.webp"
+          />
+        {% endfor -%}
+      {% endif %}
+
+      <!-- Fallback to the original file -->
+      <img 
+        src="{{ include.path | relative_url }}"
+        {% if include.class %}class="{{ include.class }}"{% endif %}  
+        {% if include.width %}width="{{ include.width }}"{% else %}width="auto"{% endif %} 
+        {% if include.height %}height="{{ include.height }}"{% else %}height="auto"{% endif %} 
+        {% if include.min-width %}min-width="{{ include.min-width }}"{% endif %} 
+        {% if include.min-height %}min-height="{{ include.min-height }}"{% endif %} 
+        {% if include.max-width %}max-width="{{ include.max-width }}"{% endif %} 
+        {% if include.max-height %}height="{{ include.max-height }}"{% endif %} 
+        {% if include.title %}title="{{ include.title }}"{% endif %} 
+        {% if include.zoomable %}data-zoomable{% endif %}
+        onerror="this.onerror=null; $('.responsive-img-srcset').remove();"
+      />
 
-  {%- if include.caption -%}<figcaption class="caption">{{ include.caption }}</figcaption>{%- endif %}
+      {%- if include.caption -%}
+        <figcaption class="caption">{{ include.caption }}</figcaption>
+      {%- endif %}
 
+    {%- endif %}
+  </picture>
+{% endif %}
 </figure>

_projects/1_project.md

@@ -78,3 +78,17 @@ Here's the code for the last row of images above:
 </div>
 ```
 {% endraw %}
+
+You can display .mp4 files and embeded YouTube links as well
+
+<div class="row">
+    <div class="col-6">
+        {% include figure.html path="assets/img/RR.mp4" title="Rickroll" class="video-fluid rounded z-depth-1" controls="true" %}
+    </div>
+    <div class="col-6">
+        {% include figure.html path="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Rickroll" class="embed-responsive embed-responsive-16by9 img-fluid rounded z-depth-1" %}
+    </div>
+</div>
+<div class="caption">
+	Never click on unfamiliar links.
+</div>