Video Fixes

- Added video to the standalone page layout. - Removed extra styles because I remembered I could just apply them with Bootstrap classes.
mayamcdougall · Mar 10, 2022 · 5f2dfde · 5f2dfde
1 parent f3374b8
commit 5f2dfde
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 11 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -11549,12 +11549,6 @@ html {
   margin-bottom: 1.5rem !important;
 }
 
-/* Block & Center Portfolio Images and Videos */
-.img-fluid {
-  display: block;
-  margin: auto;
-}
-
 /* Upstream changes? (Found in Bootstarp Builder) */
 a {
   text-decoration: none;

diff --git a/includes/content.twig b/includes/content.twig
@@ -18,7 +18,17 @@
                 <div class="divider-custom-icon"><i class="fas fa-{{ meta.divider ? meta.divider : 'star' }}"></i></div>
                 <div class="divider-custom-line"></div>
             </div>
-            {% if meta.image %}<img class="img-fluid rounded mb-5 d-block mx-auto" src="{{ meta.image|url }}" alt="{{ meta.image_alt }}" />{% endif %}
+            {% if meta.video %}
+                <video class="img-fluid rounded mb-5 d-block mx-auto" {% if meta.image %} poster="{{ meta.image|url }}" {% endif %} controls>
+                    {% set sources = meta.video is iterable ? meta.video : [meta.video] %}
+                    {% for source in sources %}
+                        <source src="{{ source|url }}" type="video/{{ source|split(".")|last }}">
+                    {% endfor %}
+                    Your browser does not support this video!
+                </video>
+            {% elseif meta.image %}
+                <img class="img-fluid rounded mb-5 d-block mx-auto" src="{{ meta.image|url }}" alt="{{ meta.image_alt }}" />
+            {% endif %}
             {{ content }}
             {{ actions(meta.actions, "single_page") }}
         </div>

diff --git a/includes/portfolio.twig b/includes/portfolio.twig
@@ -43,14 +43,14 @@
                         <div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
                     </div>
                     {% if portfolio_item.meta.thumbnail_video %}
-                        <video class="img-fluid" {% if portfolio_item.meta.thumbnail or portfolio_item.meta.image %} poster="{{ portfolio_item.meta.thumbnail|url ?: portfolio_item.meta.image|url }}" {% endif %} autoplay muted loop>
+                        <video class="img-fluid d-block mx-auto" {% if portfolio_item.meta.thumbnail or portfolio_item.meta.image %} poster="{{ portfolio_item.meta.thumbnail|url ?: portfolio_item.meta.image|url }}" {% endif %} autoplay muted loop>
                             {% set sources = portfolio_item.meta.thumbnail_video is iterable ? portfolio_item.meta.thumbnail_video : [portfolio_item.meta.thumbnail_video] %}
                             {% for source in sources %}
                                 <source src="{{ source|url }}" type="video/{{ source|split(".")|last }}">
                             {% endfor %}
                         </video>
                     {% else %}
-                        <img class="img-fluid" src="{{ portfolio_item.meta.thumbnail ? portfolio_item.meta.thumbnail|url : portfolio_item.meta.image ? portfolio_item.meta.image|url : random(config.theme_config.demo.portfolio_items).meta.image|url }}" alt="{{ portfolio_item.meta.thumbnail_alt ? portfolio_item.meta.thumbnail_alt : portfolio_item.meta.title }}" />
+                        <img class="img-fluid d-block mx-auto" src="{{ portfolio_item.meta.thumbnail ? portfolio_item.meta.thumbnail|url : portfolio_item.meta.image ? portfolio_item.meta.image|url : random(config.theme_config.demo.portfolio_items).meta.image|url }}" alt="{{ portfolio_item.meta.thumbnail_alt ? portfolio_item.meta.thumbnail_alt : portfolio_item.meta.title }}" />
                     {% endif %}
 
                 </div>

diff --git a/includes/portfolio_modals.twig b/includes/portfolio_modals.twig
@@ -26,7 +26,7 @@
                                 </div>
                                 {% if portfolio_item.meta.video %}
                                     <!-- Portfolio Modal - Video-->
-                                    <video class="img-fluid rounded mb-5" {% if portfolio_item.meta.image %} poster="{{ portfolio_item.meta.image|url }}" {% endif %} controls>
+                                    <video class="img-fluid rounded mb-5 d-block mx-auto" {% if portfolio_item.meta.image %} poster="{{ portfolio_item.meta.image|url }}" {% endif %} controls>
                                         {% set sources = portfolio_item.meta.video is iterable ? portfolio_item.meta.video : [portfolio_item.meta.video] %}
                                         {% for source in sources %}
                                             <source src="{{ source|url }}" type="video/{{ source|split(".")|last }}">
@@ -40,7 +40,7 @@
                                     </script>
                                 {% elseif portfolio_item.meta.image %}
                                     <!-- Portfolio Modal - Image-->
-                                    <img class="img-fluid rounded mb-5" src="{{ portfolio_item.meta.image|url }}" alt="{{ portfolio_item.meta.image_alt }}" />
+                                    <img class="img-fluid rounded mb-5 d-block mx-auto" src="{{ portfolio_item.meta.image|url }}" alt="{{ portfolio_item.meta.image_alt }}" />
                                 {% endif %}
                                 <!-- Portfolio Modal - Text-->
                                 {{ portfolio_item.meta.demo_content ? portfolio_item.meta.demo_content|markdown : portfolio_item.id|content }}