New hosted video setting and liquid improvements

Shopify · Jan 23, 2023 · 04b93dc · 04b93dc
1 parent 6490d2f
commit 04b93dc
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 54 deletions.
diff --git a/assets/video-section.css b/assets/video-section.css
@@ -1,6 +1,7 @@
 .video-section__media {
+  --ratio-percent: 56.25%;
   position: relative;
-  padding-bottom: 56.25%;
+  padding-bottom: calc(var(--ratio-percent) - var(--media-border-width));
 }
 
 .video-section__media.deferred-media {
@@ -26,3 +27,9 @@
   width: 100%;
   height: 100%;
 }
+
+.video-section__media video {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
@@ -2837,6 +2837,15 @@
         "cover_image": {
           "label": "Cover image"
         },
+        "video": {
+          "label": "Shopify hosted video"
+        },
+        "enable_video_looping": {
+          "label": "Enable video looping"
+        },
+        "header": {
+          "content": "Or import video from URL"
+        },
         "video_url": {
           "label": "URL",
           "placeholder": "Use a YouTube or Vimeo URL",

diff --git a/sections/video.liquid b/sections/video.liquid
@@ -15,6 +15,22 @@
   }
 {%- endstyle -%}
 
+{%- liquid
+  assign video_id = section.settings.video.id | default: section.settings.video_url.id
+  assign video_alt = section.settings.video.alt | default: section.settings.description
+  assign alt = 'sections.video.load_video' | t: description: video_alt | escape
+  assign poster = section.settings.cover_image | default: section.settings.video.preview_image
+-%}
+
+{%- capture sizes -%}
+  {% if section.settings.full_width -%}
+    100vw
+  {%- else -%}
+    (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px)
+    calc(100vw - 10rem), 100vw
+  {%- endif %}
+{%- endcapture -%}
+
 <div class="color-{{ section.settings.color_scheme }} gradient">
   <div class="video-section isolate{% unless section.settings.full_width %} page-width{% endunless %} section-{{ section.id }}-padding">
     <div
@@ -31,32 +47,18 @@
     <noscript>
       <div
         class="video-section__media"
-        {% if section.settings.cover_image != blank %}
-          style="padding-bottom: {{ 1 | divided_by: section.settings.cover_image.aspect_ratio | times: 100 }}%;"
+        {% if poster != null %}
+          style="--ratio-percent: {{ 1 | divided_by: poster.aspect_ratio | times: 100 }}%;"
         {% endif %}
       >
         <a
           href="{{ section.settings.video_url }}"
-          class="video-section__poster media media--transparent media--landscape{% if section.settings.cover_image == blank %} video-section__placeholder{% endif %}"
+          class="video-section__poster media media--transparent media--landscape{% if poster == null %} video-section__placeholder{% endif %}"
         >
-          {%- if section.settings.cover_image != blank -%}
-            {%- capture sizes -%}
-              {% if section.settings.full_width -%}
-                100vw
-              {%- else -%}
-                (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px)
-                calc(100vw - 10rem), 100vw
-              {%- endif %}
-            {%- endcapture -%}
-            {%- assign alt = 'sections.video.load_video' | t: description: section.settings.description | escape -%}
-            {{
-              section.settings.cover_image
+          {%- if poster != null -%}
+            {{ poster
               | image_url: width: 3840
-              | image_tag:
-                loading: 'lazy',
-                sizes: sizes,
-                widths: '375, 750, 1100, 1500, 1780, 2000, 3000, 3840',
-                alt: alt
+              | image_tag: loading: 'lazy', sizes: sizes, widths: '375, 750, 1100, 1500, 1780, 2000, 3000, 3840', alt: alt
             }}
           {%- else -%}
             {{ 'collection-2' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
@@ -66,29 +68,19 @@
     </noscript>
     <deferred-media
       class="video-section__media deferred-media no-js-hidden gradient global-media-settings{% if section.settings.full_width %} global-media-settings--full-width{% endif %}"
-      data-media-id="{{ section.settings.video_url.id }}"
-      {% if section.settings.cover_image != blank %}
-        style="padding-bottom: {{ 1 | divided_by: section.settings.cover_image.aspect_ratio | times: 100 }}%;"
+      data-media-id="{{ video_id }}"
+      {% if poster != null %}
+        style="--ratio-percent: {{ 1 | divided_by: poster.aspect_ratio | times: 100 }}%;"
       {% endif %}
     >
       <button
-        id="Deferred-Poster-Modal-{{ section.settings.video_url.id }}"
+        id="Deferred-Poster-Modal-{{ video_id }}"
         class="video-section__poster media deferred-media__poster media--landscape"
         type="button"
-        aria-label="{{ 'sections.video.load_video' | t: description: section.settings.description | escape }}"
+        aria-label="{{ alt }}"
       >
-        {%- if section.settings.cover_image != blank -%}
-          {%- capture sizes -%}
-            {% if section.settings.full_width -%}
-              100vw
-            {%- else -%}
-              (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px)
-              calc(100vw - 10rem), 100vw
-            {%- endif %}
-          {%- endcapture -%}
-          {%- assign alt = 'sections.video.load_video' | t: description: section.settings.description | escape -%}
-          {{
-            section.settings.cover_image
+        {%- if poster != null -%}
+          {{ poster
             | image_url: width: 3840
             | image_tag: loading: 'lazy', sizes: sizes, widths: '375, 750, 1100, 1500, 1780, 2000, 3000, 3840', alt: alt
           }}
@@ -100,22 +92,39 @@
         </span>
       </button>
       <template>
-        {%- if section.settings.video_url.type == 'youtube' -%}
-          <iframe
-            src="https://www.youtube.com/embed/{{ section.settings.video_url.id }}?enablejsapi=1"
-            class="js-youtube"
-            allow="autoplay; encrypted-media"
-            allowfullscreen
-            title="{{ section.settings.description | escape }}"
-          ></iframe>
+        {%- if section.settings.video == null -%}
+          {%- liquid
+            assign loop = ''
+            if section.settings.enable_video_looping
+              assign loop = '&loop=1&playlist=' | append: video_id
+            endif
+          -%}
+          {%- if section.settings.video_url.type == 'youtube' -%}
+            <iframe
+              src="https://www.youtube.com/embed/{{ video_id }}?enablejsapi=1&autoplay=1{{ loop }}"
+              class="js-youtube"
+              allow="autoplay; encrypted-media"
+              allowfullscreen
+              title="{{ section.settings.description | escape }}"
+            ></iframe>
+          {%- else -%}
+            <iframe
+              src="https://player.vimeo.com/video/{{ video_id }}?autoplay=1{{ loop }}"
+              class="js-vimeo"
+              allow="autoplay; encrypted-media"
+              allowfullscreen
+              title="{{ section.settings.description | escape }}"
+            ></iframe>
+          {%- endif -%}
         {%- else -%}
-          <iframe
-            src="https://player.vimeo.com/video/{{ section.settings.video_url.id }}"
-            class="js-vimeo"
-            allow="autoplay; encrypted-media"
-            allowfullscreen
-            title="{{ section.settings.description | escape }}"
-          ></iframe>
+          {{ section.settings.video
+            | video_tag:
+              image_size: "2048x",
+              autoplay: true,
+              loop: section.settings.enable_video_looping,
+              controls: true,
+              preload: "none"
+          }}
         {%- endif -%}
       </template>
     </deferred-media>
@@ -157,6 +166,21 @@
       "default": "h1",
       "label": "t:sections.all.heading_size.label"
     },
+    {
+      "type": "video",
+      "id": "video",
+      "label": "t:sections.video.settings.video.label"
+    },
+    {
+      "type": "checkbox",
+      "id": "enable_video_looping",
+      "label": "t:sections.video.settings.enable_video_looping.label",
+      "default": true
+    },
+    {
+      "type": "header",
+      "content": "t:sections.video.settings.header.content"
+    },
     {
       "type": "image_picker",
       "id": "cover_image",
@@ -168,7 +192,7 @@
       "accept": ["youtube", "vimeo"],
       "default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
       "label": "t:sections.video.settings.video_url.label",
-      "placeholder": "t:sections.video.settings.video_url.placeholder",
+      "placeholder": "Use a YouTube or Vimeo URL",
       "info": "t:sections.video.settings.video_url.info"
     },
     {