zz-shopify-components 0.0.21 → 0.0.22

package/snippets/zz-spoke.liquid

@@ -1,142 +1,142 @@
-{% comment %}
-  背书
-  bg_color: 背景色
-  pc_image: pc 端图片/视频封面
-  mb_image: 移动端图片/视频封面
-  pc_video: pc 端视频
-  mb_video: 移动端视频
-  media_class: 图片/视频类名（设置高）
-  pc_media_pos: pc 端视频位置 'top'|'bottom'，默认 top
-  mb_media_pos: 移动端视频位置 'top'|'bottom'，默认 top
-  class_name: 自定义类名（设置宽高）
-
-  user_name: 用户名
-  name_class: 名字类名（设置文字大小和颜色）
-  user_account: 账号
-  account_class: 账号类名
-  user_avatar: 用户头像
-  content: 内容
-  content_class: 内容类名（设置文字大小和颜色）
-
-  logo: 图标
-  logo_class: 图标类名
-  logo_alt: 图标 alt
-{% endcomment %}
-
-{% if pc_video != blank or pc_image != black %}
-  {% assign only_content = false %}
-  {% assign class_name = class_name
-    | default: 'tw-w-[162px] tw-h-[271px] lg:tw-w-[351px] lg:tw-h-[550px]'
-  %}
-  {% if content != blank %}
-    {% assign media_class = media_class
-      | default: 'tw-h-[152px] lg:tw-h-[397px]'
-    %}
-  {% else %}
-    {% assign media_class = media_class
-      | default: 'tw-h-[221px] lg:tw-h-[468px]'
-    %}
-  {% endif %}
-{% else %}
-  {% assign only_content = true %}
-  {% assign class_name = class_name
-    | default: 'tw-w-[162px] tw-h-[175px] lg:tw-w-[351px] lg:tw-h-[265px]'
-  %}
-{% endif %}
-
-{% assign pc_media_pos = pc_media_pos | default: 'top' %}
-{% assign mb_media_pos = mb_media_pos | default: 'top' %}
-{% assign bg_color = bg_color | default: 'rgba(255,255,255,0.1)' %}
-{% assign name_class = name_class
-  | default: 'max-lg:tw-text-[10px] lg:tw-text-[14px] tw-text-white'
-%}
-{% assign account_class = account_class | default: 'tw-opacity-50' %}
-{% assign content_class = content_class
-  | default: 'max-lg:tw-text-[9px] lg:tw-text-[14px] tw-tracking-[0.01] tw-text-white'
-%}
-{% assign logo_class = logo_class | default: 'tw-w-[39px] lg:tw-w-[45px]' %}
-
-<div class='zz-spoke-block tw-relative tw-flex {% if pc_media_pos == 'top' %}lg:tw-flex-col {% else %}lg:tw-flex-col-reverse {% endif %} {% if mb_media_pos == 'top' %}max-lg:tw-flex-col {% else %}max-lg:tw-flex-col-reverse {% endif %} tw-rounded-[10px] lg:tw-rounded-[16px] tw-overflow-hidden tw-justify-between {{ class_name }}'>
-  {% if only_content == false %}
-    {% comment %} 视频/图片 {% endcomment %}
-    <div
-      class='zz-spoke-block-media tw-w-full {{media_class}}'
-    >
-      {% if pc_video != blank %}
-        {% render 'zz-video',
-          pc_video: pc_video,
-          pc_poster: pc_image,
-          mb_video: mb_video,
-          mb_poster: mb_image,
-          pc_posterWidth: 700,
-          mb_poster_width: 480,
-          class: 'click-video-play-pause tw-w-full tw-h-full tw-cursor-pointer tw-object-cover'
-        %}
-      {% else %}
-        {% render 'zz-img',
-          pc_image: pc_image,
-          mb_image: mb_image,
-          image_alt: image_alt,
-          pc_width: 700,
-          mb_width: 480
-        %}
-      {% endif %}
-      {% comment %}
-        {% if user_intro != blank %}
-          <div class='tw-absolute tw-left-0 tw-right-0 tw-bottom-0  lg:tw-top-0'>
-            <div class='max-lg:tw-text-[12px] lg:tw-text-[14px] tw-leading-[1.2] tw-font-bold tw-text-white'>
-              {{ user_name | upcase }}
-            </div>
-            <div class='tw-mt-[4px] max-lg:tw-text-[10px] lg:tw-text-[14px] tw-font-medium tw-text-white/70 lg:tw-text-white/60'>
-              {{ user_intro | upcase }}
-            </div>
-          </div>
-        {% endif %}
-      {% endcomment %}
-    </div>
-  {% endif %}
-  <div class='zz-spoke-block-content tw-relative tw-p-[10px] tw-pr-[0px] lg:tw-pl-[24px] lg:tw-pr-[30px] lg:tw-py-[20px] tw-w-full tw-h-fit tw-rounded-[10px] lg:tw-rounded-[16px] tw-overflow-hidden {% if only_content %}tw-pb-[32px] lg:tw-pb-[40px] {% else %}tw-pb-[10px] lg:tw-pb-[20px]{% endif %}'>
-    <div class='tw-flex tw-items-center'>
-      <div class='tw-w-[20px] tw-min-w-[20px] tw-h-[20px] lg:tw-w-[36px] lg:tw-min-w-[36px] lg:tw-h-[36px]'>
-        {% render 'zz-img',
-          pc_image: user_avatar,
-          mb_image: user_avatar,
-          image_alt: user_name,
-          pc_width: 72,
-          mb_width: 60
-        %}
-      </div>
-      <div class='tw-ml-[10px] tw-leading-[1.5] tw-font-bold {{ name_class }}'>
-        {{ user_name }}
-        <span class='tw-block tw-font-medium tw-leading-[1.5] {{ account_class }}'>
-          {{- user_account -}}
-        </span>
-      </div>
-    </div>
-    {% if content != blank %}
-      <div class='tw-mt-[8px] lg:tw-mt-[14px] tw-leading-[1.5] {{ content_class }}'>
-        {{ content }}
-      </div>
-    {% endif %}
-  </div>
-  {% if logo != blank %}
-    <div class='tw-absolute tw-left-[50%] -tw-translate-x-[50%] tw-bottom-[10px] {{ logo_class }}'>
-      {% render 'zz-img',
-        pc_image: logo,
-        mb_image: logo,
-        image_alt: logo_alt,
-        pc_width: 120,
-        mb_width: 120
-      %}
-    </div>
-  {% endif %}
-</div>
-
-<style>
-  .zz-spoke-block {
-    background-color: {{ bg_color }};
-  }
-  .zz-spoke-block p {
-    margin: 0;
-  }
-</style>
+{% comment %}
+  背书
+  bg_color: 背景色
+  pc_image: pc 端图片/视频封面
+  mb_image: 移动端图片/视频封面
+  pc_video: pc 端视频
+  mb_video: 移动端视频
+  media_class: 图片/视频类名（设置高）
+  pc_media_pos: pc 端视频位置 'top'|'bottom'，默认 top
+  mb_media_pos: 移动端视频位置 'top'|'bottom'，默认 top
+  class_name: 自定义类名（设置宽高）
+
+  user_name: 用户名
+  name_class: 名字类名（设置文字大小和颜色）
+  user_account: 账号
+  account_class: 账号类名
+  user_avatar: 用户头像
+  content: 内容
+  content_class: 内容类名（设置文字大小和颜色）
+
+  logo: 图标
+  logo_class: 图标类名
+  logo_alt: 图标 alt
+{% endcomment %}
+
+{% if pc_video != blank or pc_image != black %}
+  {% assign only_content = false %}
+  {% assign class_name = class_name
+    | default: 'tw-w-[162px] tw-h-[271px] lg:tw-w-[351px] lg:tw-h-[550px]'
+  %}
+  {% if content != blank %}
+    {% assign media_class = media_class
+      | default: 'tw-h-[152px] lg:tw-h-[397px]'
+    %}
+  {% else %}
+    {% assign media_class = media_class
+      | default: 'tw-h-[221px] lg:tw-h-[468px]'
+    %}
+  {% endif %}
+{% else %}
+  {% assign only_content = true %}
+  {% assign class_name = class_name
+    | default: 'tw-w-[162px] tw-h-[175px] lg:tw-w-[351px] lg:tw-h-[265px]'
+  %}
+{% endif %}
+
+{% assign pc_media_pos = pc_media_pos | default: 'top' %}
+{% assign mb_media_pos = mb_media_pos | default: 'top' %}
+{% assign bg_color = bg_color | default: 'rgba(255,255,255,0.1)' %}
+{% assign name_class = name_class
+  | default: 'max-lg:tw-text-[10px] lg:tw-text-[14px] tw-text-white'
+%}
+{% assign account_class = account_class | default: 'tw-opacity-50' %}
+{% assign content_class = content_class
+  | default: 'max-lg:tw-text-[9px] lg:tw-text-[14px] tw-tracking-[0.01] tw-text-white'
+%}
+{% assign logo_class = logo_class | default: 'tw-w-[39px] lg:tw-w-[45px]' %}
+
+<div class='zz-spoke-block tw-relative tw-flex {% if pc_media_pos == 'top' %}lg:tw-flex-col {% else %}lg:tw-flex-col-reverse {% endif %} {% if mb_media_pos == 'top' %}max-lg:tw-flex-col {% else %}max-lg:tw-flex-col-reverse {% endif %} tw-rounded-[10px] lg:tw-rounded-[16px] tw-overflow-hidden tw-justify-between {{ class_name }}'>
+  {% if only_content == false %}
+    {% comment %} 视频/图片 {% endcomment %}
+    <div
+      class='zz-spoke-block-media tw-w-full {{media_class}}'
+    >
+      {% if pc_video != blank %}
+        {% render 'zz-video',
+          pc_video: pc_video,
+          pc_poster: pc_image,
+          mb_video: mb_video,
+          mb_poster: mb_image,
+          pc_posterWidth: 700,
+          mb_poster_width: 480,
+          class: 'click-video-play-pause tw-w-full tw-h-full tw-cursor-pointer tw-object-cover'
+        %}
+      {% else %}
+        {% render 'zz-img',
+          pc_image: pc_image,
+          mb_image: mb_image,
+          image_alt: image_alt,
+          pc_width: 700,
+          mb_width: 480
+        %}
+      {% endif %}
+      {% comment %}
+        {% if user_intro != blank %}
+          <div class='tw-absolute tw-left-0 tw-right-0 tw-bottom-0  lg:tw-top-0'>
+            <div class='max-lg:tw-text-[12px] lg:tw-text-[14px] tw-leading-[1.2] tw-font-bold tw-text-white'>
+              {{ user_name | upcase }}
+            </div>
+            <div class='tw-mt-[4px] max-lg:tw-text-[10px] lg:tw-text-[14px] tw-font-medium tw-text-white/70 lg:tw-text-white/60'>
+              {{ user_intro | upcase }}
+            </div>
+          </div>
+        {% endif %}
+      {% endcomment %}
+    </div>
+  {% endif %}
+  <div class='zz-spoke-block-content tw-relative tw-p-[10px] tw-pr-[0px] lg:tw-pl-[24px] lg:tw-pr-[30px] lg:tw-py-[20px] tw-w-full tw-h-fit tw-rounded-[10px] lg:tw-rounded-[16px] tw-overflow-hidden {% if only_content %}tw-pb-[32px] lg:tw-pb-[40px] {% else %}tw-pb-[10px] lg:tw-pb-[20px]{% endif %}'>
+    <div class='tw-flex tw-items-center'>
+      <div class='tw-w-[20px] tw-min-w-[20px] tw-h-[20px] lg:tw-w-[36px] lg:tw-min-w-[36px] lg:tw-h-[36px]'>
+        {% render 'zz-img',
+          pc_image: user_avatar,
+          mb_image: user_avatar,
+          image_alt: user_name,
+          pc_width: 72,
+          mb_width: 60
+        %}
+      </div>
+      <div class='tw-ml-[10px] tw-leading-[1.5] tw-font-bold {{ name_class }}'>
+        {{ user_name }}
+        <span class='tw-block tw-font-medium tw-leading-[1.5] {{ account_class }}'>
+          {{- user_account -}}
+        </span>
+      </div>
+    </div>
+    {% if content != blank %}
+      <div class='tw-mt-[8px] lg:tw-mt-[14px] tw-leading-[1.5] {{ content_class }}'>
+        {{ content }}
+      </div>
+    {% endif %}
+  </div>
+  {% if logo != blank %}
+    <div class='tw-absolute tw-left-[50%] -tw-translate-x-[50%] tw-bottom-[10px] {{ logo_class }}'>
+      {% render 'zz-img',
+        pc_image: logo,
+        mb_image: logo,
+        image_alt: logo_alt,
+        pc_width: 120,
+        mb_width: 120
+      %}
+    </div>
+  {% endif %}
+</div>
+
+<style>
+  .zz-spoke-block {
+    background-color: {{ bg_color }};
+  }
+  .zz-spoke-block p {
+    margin: 0;
+  }
+</style>

package/snippets/zz-tag.liquid

@@ -1,22 +1,22 @@
-{% comment %}
-  tag: 标签
-  tag_bg_color_gradient: 标签背景颜色渐变
-  tag_bg_color: 标签背景颜色
-  tag_color: 标签颜色
-  class_name: 增加类名
-{% endcomment %}
-  
-{%- capture tag_bg_color -%}
-  {%- if tag_bg_color_gradient != blank %} 
-    {{ tag_bg_color_gradient }}
-  {%- else -%} 
-    {{ tag_bg_color }}
-  {%- endif %}
-{%- endcapture %}
-{% assign tag_color = tag_color %}
-<div
-  class='{{ class_name }} zz-tag tw-z-[1] tw-w-fit tw-relative tw-italic tw-font-bold max-lg:tw-h-[24px] tw-text-[16px] tw-leading-[24px] tw-px-[16px] lg:tw-h-[32px] lg:tw-text-[20px] lg:tw-px-[28px] lg:tw-leading-[32px]'
-  style='color: {{ tag_color }}; --zz-tag-bg-color: {{ tag_bg_color }};'
->
-  {{ tag }}
-</div>
+{% comment %}
+  tag: 标签
+  tag_bg_color_gradient: 标签背景颜色渐变
+  tag_bg_color: 标签背景颜色
+  tag_color: 标签颜色
+  class_name: 增加类名
+{% endcomment %}
+  
+{%- capture tag_bg_color -%}
+  {%- if tag_bg_color_gradient != blank %} 
+    {{ tag_bg_color_gradient }}
+  {%- else -%} 
+    {{ tag_bg_color }}
+  {%- endif %}
+{%- endcapture %}
+{% assign tag_color = tag_color %}
+<div
+  class='{{ class_name }} zz-tag tw-z-[1] tw-w-fit tw-relative tw-italic tw-font-bold max-lg:tw-h-[24px] tw-text-[16px] tw-leading-[24px] tw-px-[16px] lg:tw-h-[32px] lg:tw-text-[20px] lg:tw-px-[28px] lg:tw-leading-[32px]'
+  style='color: {{ tag_color }}; --zz-tag-bg-color: {{ tag_bg_color }};'
+>
+  {{ tag }}
+</div>

package/snippets/zz-video-button.liquid

@@ -1,55 +1,55 @@
-
-{% comment %} 
- video: 视频
- poster: 封面
-color：按钮颜色
-  - black：黑色
-  - white：白色
-  - orange：橙色
-
-size：按钮尺寸
-  - large：大号
-  - medium：中号（默认）
-  - small：小号
-
-其他参数：
-- href：链接地址
-- icon：图标名称
-- text：按钮文字
-- class_name：自定义类名
-{% endcomment %}
-
-<zz-video-button>
-
-  {% assign btn_class_name = class_name  | append: ' togglePopup' %}
-  {% render 'zz-button',
-      type: 'default',
-      color: color,
-      text: text,
-      size: size,
-      backdrop_filter: true,
-      class_name: btn_class_name,
-      icon: '<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M13.635 6.42979C14.5112 6.91507 14.5112 8.08492 13.635 8.57021L6.84517 12.331C5.94149 12.8315 4.79058 12.232 4.79058 11.2608L4.79058 3.73925C4.79058 2.768 5.94148 2.16851 6.84517 2.66904L13.635 6.42979Z" fill="white"/>
-      </svg>
-      '
-    %}
-    
-      <div
-        class='togglePopup popup tw-flex !tw-hidden tw-bg-[rgba(0,0,0,0.9)] tw-items-center tw-justify-center tw-fixed tw-top-0 tw-left-0 tw-right-0 tw-bottom-0 tw-z-[999] tw-overflow-hidden'
-      >
-        <div class="tw-max-w-[960px]">
-          {% render 'zz-video',
-            pc_video: video,
-            pc_poster: poster,
-            lazy: false,
-            class: ' tw-w-full tw-h-auto',
-            autoplay: false,
-            loop: true,
-          %}
-  
-        </div>
-          
-      </div>
-    </zz-video-button>
+
+{% comment %} 
+ video: 视频
+ poster: 封面
+color：按钮颜色
+  - black：黑色
+  - white：白色
+  - orange：橙色
+
+size：按钮尺寸
+  - large：大号
+  - medium：中号（默认）
+  - small：小号
+
+其他参数：
+- href：链接地址
+- icon：图标名称
+- text：按钮文字
+- class_name：自定义类名
+{% endcomment %}
+
+<zz-video-button>
+
+  {% assign btn_class_name = class_name  | append: ' togglePopup' %}
+  {% render 'zz-button',
+      type: 'default',
+      color: color,
+      text: text,
+      size: size,
+      backdrop_filter: true,
+      class_name: btn_class_name,
+      icon: '<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M13.635 6.42979C14.5112 6.91507 14.5112 8.08492 13.635 8.57021L6.84517 12.331C5.94149 12.8315 4.79058 12.232 4.79058 11.2608L4.79058 3.73925C4.79058 2.768 5.94148 2.16851 6.84517 2.66904L13.635 6.42979Z" fill="white"/>
+      </svg>
+      '
+    %}
+    
+      <div
+        class='togglePopup popup tw-flex !tw-hidden tw-bg-[rgba(0,0,0,0.9)] tw-items-center tw-justify-center tw-fixed tw-top-0 tw-left-0 tw-right-0 tw-bottom-0 tw-z-[999] tw-overflow-hidden'
+      >
+        <div class="tw-max-w-[960px]">
+          {% render 'zz-video',
+            pc_video: video,
+            pc_poster: poster,
+            lazy: false,
+            class: ' tw-w-full tw-h-auto',
+            autoplay: false,
+            loop: true,
+          %}
+  
+        </div>
+          
+      </div>
+    </zz-video-button>
     

package/snippets/zz-video-md.liquid

@@ -1,117 +1,117 @@
-{% comment %}
-  pc_video: 视频地址
-  pc_poster: 视频封面
-  mb_video: 视频地址
-  mb_poster: 视频封面
-  lazy: 是否懒加载
-  pc_posterWidth: 视频封面宽度
-  mb_poster_width: 视频封面宽度
-  class: 视频类名
-  autoplay: 是否自动播放
-  loop: 是否循环播放
-  muted: 是否静音
-  separate_display: 区分显示pc还是mb, true时 没有配置PC与mb将不会显示。不会使用PC的配置来配置mb
-{% endcomment %}
-
-{% if separate_display == true %}
-  {% assign separate_display = true %}
-{% else %}
-  {% assign separate_display = false %}
-{% endif %}
-
-{% if pc_video and pc_poster %}
-  {% assign pc_src = pc_video %}
-{% if pc_video.media_type == 'video' %}
-  {% assign pc_src = pc_video.sources[1].url %}
-{% endif %}
-
-{% assign video_poster_width = pc_posterWidth | default: 1500 %}
-{% assign video_poster = pc_poster
-  | image_url: width: video_poster_width
-%}
-  <video
-    {% if class %}
-      class='{{class}} lozad zz-video {% if autoplay %} video-play-pause {% endif %} {% if mb_video != blank and separate_display == false %} max-md:tw-hidden {% endif %}'
-    {% endif %}
-    {% if autoplay %}
-      autoplay
-    {% endif %}
-    {% if loop %}
-      loop
-    {% endif %}
-    {% if muted %}
-      muted
-    {% endif %}
-    {% if controls %}
-      controls
-    {% endif %}
-    {% if lazy %}
-    data-poster='{{video_poster | default: ''}}'
-    {% else %}
-    poster='{{video_poster | default: ''}}'
-    {% endif %}
-    webkit-playsinline
-    playsinline
-    x5-video-player-type='h5'
-
-  >
-    <source type='video/mp4'
-        data-src='{{pc_src}}'
-      {% if lazy %}
-        data-src='{{pc_src}}'
-      {% else %}
-        src='{{ pc_src }}'
-      {% endif %}
-      >
-
-  </video>
-{% endif %}
-
-{% if mb_video and mb_poster %}
-  {% assign mb_src = mb_video %}
-{% if mb_video.media_type == 'video' %}
-  {% assign mb_src = mb_video.sources[1].url %}
-{% endif %}
-
-{% assign mb_video_poster_width = mb_poster_width | default: 1500 %}
-{% assign mb_video_poster = mb_poster
-  | image_url: width: mb_video_poster_width
-%}
-  <video
-    {% if class %}
-      class='{{class}} lozad zz-video {% if autoplay %} video-play-pause {% endif %} md:tw-hidden'
-    {% endif %}
-    {% if autoplay %}
-      autoplay
-    {% endif %}
-    {% if loop %}
-      loop
-    {% endif %}
-    {% if muted %}
-      muted
-    {% endif %}
-    {% if controls %}
-      controls
-    {% endif %}
-    {% if lazy %}
-    data-poster='{{mb_video_poster | default: ''}}'
-    {% else %}
-    poster='{{mb_video_poster | default: ''}}'
-    {% endif %}
-    webkit-playsinline
-    playsinline
-    x5-video-player-type='h5'
-
-  >
-    <source type='video/mp4'
-        data-src='{{mb_src}}'
-      {% if lazy %}
-        data-src='{{mb_src}}'
-      {% else %}
-        src='{{ mb_src }}'
-      {% endif %}
-      >
-
-  </video>
-{% endif %}
-
+{% comment %}
+  pc_video: 视频地址
+  pc_poster: 视频封面
+  mb_video: 视频地址
+  mb_poster: 视频封面
+  lazy: 是否懒加载
+  pc_posterWidth: 视频封面宽度
+  mb_poster_width: 视频封面宽度
+  class: 视频类名
+  autoplay: 是否自动播放
+  loop: 是否循环播放
+  muted: 是否静音
+  separate_display: 区分显示pc还是mb, true时 没有配置PC与mb将不会显示。不会使用PC的配置来配置mb
+{% endcomment %}
+
+{% if separate_display == true %}
+  {% assign separate_display = true %}
+{% else %}
+  {% assign separate_display = false %}
+{% endif %}
+
+{% if pc_video and pc_poster %}
+  {% assign pc_src = pc_video %}
+{% if pc_video.media_type == 'video' %}
+  {% assign pc_src = pc_video.sources[1].url %}
+{% endif %}
+
+{% assign video_poster_width = pc_posterWidth | default: 1500 %}
+{% assign video_poster = pc_poster
+  | image_url: width: video_poster_width
+%}
+  <video
+    {% if class %}
+      class='{{class}} lozad zz-video {% if autoplay %} video-play-pause {% endif %} {% if mb_video != blank and separate_display == false %} max-md:tw-hidden {% endif %}'
+    {% endif %}
+    {% if autoplay %}
+      autoplay
+    {% endif %}
+    {% if loop %}
+      loop
+    {% endif %}
+    {% if muted %}
+      muted
+    {% endif %}
+    {% if controls %}
+      controls
+    {% endif %}
+    {% if lazy %}
+    data-poster='{{video_poster | default: ''}}'
+    {% else %}
+    poster='{{video_poster | default: ''}}'
+    {% endif %}
+    webkit-playsinline
+    playsinline
+    x5-video-player-type='h5'
+
+  >
+    <source type='video/mp4'
+        data-src='{{pc_src}}'
+      {% if lazy %}
+        data-src='{{pc_src}}'
+      {% else %}
+        src='{{ pc_src }}'
+      {% endif %}
+      >
+
+  </video>
+{% endif %}
+
+{% if mb_video and mb_poster %}
+  {% assign mb_src = mb_video %}
+{% if mb_video.media_type == 'video' %}
+  {% assign mb_src = mb_video.sources[1].url %}
+{% endif %}
+
+{% assign mb_video_poster_width = mb_poster_width | default: 1500 %}
+{% assign mb_video_poster = mb_poster
+  | image_url: width: mb_video_poster_width
+%}
+  <video
+    {% if class %}
+      class='{{class}} lozad zz-video {% if autoplay %} video-play-pause {% endif %} md:tw-hidden'
+    {% endif %}
+    {% if autoplay %}
+      autoplay
+    {% endif %}
+    {% if loop %}
+      loop
+    {% endif %}
+    {% if muted %}
+      muted
+    {% endif %}
+    {% if controls %}
+      controls
+    {% endif %}
+    {% if lazy %}
+    data-poster='{{mb_video_poster | default: ''}}'
+    {% else %}
+    poster='{{mb_video_poster | default: ''}}'
+    {% endif %}
+    webkit-playsinline
+    playsinline
+    x5-video-player-type='h5'
+
+  >
+    <source type='video/mp4'
+        data-src='{{mb_src}}'
+      {% if lazy %}
+        data-src='{{mb_src}}'
+      {% else %}
+        src='{{ mb_src }}'
+      {% endif %}
+      >
+
+  </video>
+{% endif %}
+