I have implemented the below code for Dawn to make my videos automatically play on mobile and desktop. It works fine, but the video on mobile view has jumped higher than the images. Can anyone help solve the code below?
product-thumbnail.liquid
|
{% comment %}
Renders a product thumbnail with a modal-opener
Accepts:
- media: {Object} Product Media object
- position: {String} Position of the media. Used for accessible label.
- loop: {Boolean} Enable video looping (optional)
- modal_id: {String} The product modal that will be shown by clicking the thumbnail
- xr_button: {Boolean} Renders the “View in your space” button (shopify-xr-button) if the media is a 3D Model
Usage:
{% render ‘product-thumbnail’,
media: media,
position: forloop.index,
loop: section.settings.enable_video_looping,
modal_id: section.id,
autoplay: true
%}
{% endcomment %}
{%- if media.media_type == ‘video’ or media.media_type == ‘external_video’ -%}
{% render ‘icon-play’ %}
<img
srcset=“{% if media.preview_image.width >= 288 %}{{ media.preview_image | img_url: ‘288x’ }} 288w,{% endif %}
{% if media.preview_image.width >= 500 %}{{ media.preview_image | img_url: ‘500x’ }} 500w,{% endif %}
{% if media.preview_image.width >= 576 %}{{ media.preview_image | img_url: ‘576x’ }} 576w,{% endif %}
{% if media.preview_image.width >= 750 %}{{ media.preview_image | img_url: ‘750x’ }} 750w,{% endif %}
{% if media.preview_image.width >= 1100 %}{{ media.preview_image | img_url: ‘1100x’ }} 1100w,{% endif %}
{% if media.preview_image.width >= 1500 %}{{ media.preview_image | img_url: ‘1500x’ }} 1500w{% endif %}”
src=“{{ media | img_url: ‘1500x’ }}”
sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | times: 0.64 | round }}px, (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)”
loading=“lazy”
width=“576”
height=“{{ 576 | divided_by: media.preview_image.aspect_ratio | ceil }}”
alt=“{{ media.preview_image.alt | escape }}”
>
{{ ‘products.product.video_exit_message’ | t: title: product.title | escape }}
{%- else -%}
<img
srcset=“{% if media.preview_image.width >= 288 %}{{ media.preview_image | img_url: ‘288x’ }} 288w,{% endif %}
{% if media.preview_image.width >= 500 %}{{ media.preview_image | img_url: ‘500x’ }} 500w,{% endif %}
{% if media.preview_image.width >= 576 %}{{ media.preview_image | img_url: ‘576x’ }} 576w,{% endif %}
{% if media.preview_image.width >= 750 %}{{ media.preview_image | img_url: ‘750x’ }} 750w,{% endif %}
{% if media.preview_image.width >= 1100 %}{{ media.preview_image | img_url: ‘1100x’ }} 1100w,{% endif %}
{% if media.preview_image.width >= 1500 %}{{ media.preview_image | img_url: ‘1500x’ }} 1500w{% endif %}”
src=“{{ media | img_url: ‘1500x’ }}”
sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | times: 0.64 | round }}px, (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)”
loading=“lazy”
width=“576”
height=“{{ 576 | divided_by: media.preview_image.aspect_ratio | ceil }}”
alt=“{{ media.preview_image.alt | escape }}”
>
{%- endif -%}
{%- liquid
case media.media_type
when ‘video’ or ‘external_video’
render ‘icon-play’
when ‘model’
render ‘icon-3d-model’
else
render ‘icon-zoom’
endcase
-%}
{% if media.media_type != ‘video’ %}
<img
srcset=“{% if media.preview_image.width >= 288 %}{{ media.preview_image | img_url: ‘288x’ }} 288w,{% endif %}
{% if media.preview_image.width >= 500 %}{{ media.preview_image | img_url: ‘500x’ }} 500w,{% endif %}
{% if media.preview_image.width >= 576 %}{{ media.preview_image | img_url: ‘576x’ }} 576w,{% endif %}
{% if media.preview_image.width >= 750 %}{{ media.preview_image | img_url: ‘750x’ }} 750w,{% endif %}
{% if media.preview_image.width >= 1100 %}{{ media.preview_image | img_url: ‘1100x’ }} 1100w,{% endif %}
{% if media.preview_image.width >= 1500 %}{{ media.preview_image | img_url: ‘1500x’ }} 1500w{% endif %}”
src=“{{ media | img_url: ‘1500x’ }}”
sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | times: 0.64 | round }}px, (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)”
loading=“lazy”
width=“576”
height=“{{ 576 | divided_by: media.preview_image.aspect_ratio | ceil }}”
alt=“{{ media.preview_image.alt | escape }}”
>
{%- if position == ‘featured’ %}
{{ ‘products.product.media.open_featured_media’ | t }}
{%- else -%}
{{ ‘products.product.media.open_media’ | t: index: position }}
{%- endif -%}
{%- else -%}
{%- liquid
assign videos = product.media | where: “media_type”, “video”
assign video_url = videos[0].sources[1].url
echo ‘’
-%}
{%- endif -%}
{%- if media.media_type != ‘image’ -%}
{%- if media.media_type == ‘model’ -%}
{%- else -%}
{%- endif -%}
{% if media.media_type != ‘video’ %}
{%- if media.media_type == ‘model’ -%}
{{ ‘products.product.media.play_model’ | t }}
{%- render ‘icon-3d-model’ -%}
{%- else -%}
{{ ‘products.product.media.play_video’ | t }}
{%- render ‘icon-play’ -%}
{%- endif -%}
<img
srcset=“{% if media.preview_image.width >= 288 %}{{ media.preview_image | img_url: ‘288x’ }} 288w,{% endif %}
{% if media.preview_image.width >= 500 %}{{ media.preview_image | img_url: ‘500x’ }} 500w,{% endif %}
{% if media.preview_image.width >= 576 %}{{ media.preview_image | img_url: ‘576x’ }} 576w,{% endif %}
{% if media.preview_image.width >= 750 %}{{ media.preview_image | img_url: ‘750x’ }} 750w,{% endif %}
{% if media.preview_image.width >= 1100 %}{{ media.preview_image | img_url: ‘1100x’ }} 1100w,{% endif %}
{% if media.preview_image.width >= 1500 %}{{ media.preview_image | img_url: ‘1500x’ }} 1500w{% endif %}”
src=“{{ media | img_url: ‘1500x’ }}”
sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | times: 0.64 | round }}px, (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)”
loading=“lazy”
width=“576”
height=“{{ 576 | divided_by: media.preview_image.aspect_ratio }}”
alt=“{{ media.preview_image.alt | escape }}”
>
{%- endif -%}
{% if media.media_type != ‘video’ %}
{%- endif -%}
{%- liquid
case media.media_type
when ‘external_video’
assign video_class = ‘js-’ | append: media.host
if media.host == ‘youtube’
echo media | external_video_url: autoplay: true, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: “lazy”
else
echo media | external_video_url: autoplay: true, loop: loop | external_video_tag: class: video_class, loading: “lazy”
endif
when ‘video’
assign videos = product.media | where: “media_type”, “video”
assign video_url = videos[0].sources[1].url
echo ‘’
when ‘model’
echo media | media_tag: image_size: “2048x”, toggleable: true
endcase
-%}
{% if media.media_type != ‘video’ %}
{%- endif -%}
{%- if media.media_type == ‘model’ -%}
{%- if xr_button -%}
<button
class=“button button–full-width product__xr-button”
type=“button”
aria-label=“{{ ‘products.product.xr_button_label’ | t }}”
data-shopify-xr
data-shopify-model3d-id=“{{ media.id }}”
data-shopify-title=“title”
data-shopify-xr-hidden
>
{% render ‘icon-3d-model’ %}
{{ ‘products.product.xr_button’ | t }}
{%- endif -%}
{%- else -%}
{%- endif -%}
{%- endif -%}
|
| - |
product-media.liquid
|
{% comment %}
Renders product media
Accepts:
- media: {Object} Product Media object
- loop: {Boolean} Enable video looping (optional)
- variant_image: {Boolean} The media associated with a variant
Usage:
{% render ‘product-media’,
media: media,
loop: section.settings.enable_video_looping,
variant_image: true,
autoplay: true
%}
{% endcomment %}
{%- if media.media_type == ‘image’ -%}
<img
srcset=“{%- if media.preview_image.width >= 550 -%}{{ media.preview_image | img_url: ‘550x’ }} 550w,{%- endif -%}
{%- if media.preview_image.width >= 1100 -%}{{ media.preview_image | img_url: ‘1100x’ }} 1100w,{%- endif -%}
{%- if media.preview_image.width >= 1445 -%}{{ media.preview_image | img_url: ‘1445x’ }} 1445w,{%- endif -%}
{%- if media.preview_image.width >= 1680 -%}{{ media.preview_image | img_url: ‘1680x’ }} 1680w,{%- endif -%}
{%- if media.preview_image.width >= 2048 -%}{{ media.preview_image | img_url: ‘2048x’ }} 2048w,{%- endif -%}
{%- if media.preview_image.width >= 2200 -%}{{ media.preview_image | img_url: ‘2200x’ }} 2200w,{%- endif -%}
{%- if media.preview_image.width >= 2890 -%}{{ media.preview_image | img_url: ‘2890x’ }} 2890w,{%- endif -%}
{%- if media.preview_image.width >= 4096 -%}{{ media.preview_image | img_url: ‘4096x’ }} 4096w,{%- endif -%}
{{ media.preview_image | img_url: ‘master’ }} {{ media.preview_image.width }}w”
sizes=“(min-width: 750px) calc(100vw - 22rem), 1100px”
src=“{{ media.preview_image | img_url: ‘1445x’ }}”
alt=“{{ media.alt | escape }}”
loading=“lazy”
width=“1100”
height=“{{ 1100 | divided_by: media.preview_image.aspect_ratio | ceil }}”
data-media-id=“{{ media.id }}”
{% if variant_image %}class=“product__media-item–variant”{% endif %}
>
{%- else -%}
{%- if media.media_type == ‘model’ -%}
{%- else -%}
{%- endif -%}
{% if media.media_type != ‘video’ %}
{%- if media.media_type == ‘model’ -%}
{%- render ‘icon-3d-model’ -%}
{%- else -%}
{%- render ‘icon-play’ -%}
{%- endif -%}
<img
srcset=“{% if media.preview_image.width >= 288 %}{{ media.preview_image | img_url: ‘288x’ }} 288w,{% endif %}
{% if media.preview_image.width >= 500 %}{{ media.preview_image | img_url: ‘500x’ }} 500w,{% endif %}
{% if media.preview_image.width >= 576 %}{{ media.preview_image | img_url: ‘576x’ }} 576w,{% endif %}
{% if media.preview_image.width >= 550 %}{{ media.preview_image | img_url: ‘550x’ }} 550w,{% endif %}
{% if media.preview_image.width >= 1100 %}{{ media.preview_image | img_url: ‘1100x’ }} 1100w{% endif %}”
src=“{{ media | img_url: ‘550x550’ }}”
sizes=“(min-width: 1200px) calc((1200px - 10rem) / 2), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)”
loading=“lazy”
width=“576”
height=“{{ 576 | divided_by: media.preview_image.aspect_ratio }}”
alt=“{{ media.preview_image.alt | escape }}”
>
{%- endif -%}
{% if media.media_type != ‘video’ %}
{%- endif -%}
{%- case media.media_type -%}
{%- when ‘external_video’ -%}
{%- assign video_class = ‘js-’ | append: media.host -%}
{%- if media.host == ‘youtube’ -%}
{{ media | external_video_url: autoplay: true, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: “lazy” }}
{%- else -%}
{{ media | external_video_url: autoplay: true, loop: loop | external_video_tag: class: video_class, loading: “lazy” }}
{%- endif -%}
{%- when ‘video’ -%}
{%- liquid
assign videos = product.media | where: “media_type”, “video”
assign video_url = videos[0].sources[1].url
echo ‘’
-%}
{%- when ‘model’ -%}
{{ media | media_tag: image_size: “2048x”, toggleable: true }}
{%- endcase -%}
{% if media.media_type != ‘video’ %}
{%- endif -%}
{%- if media.media_type == ‘model’ -%}
<button
class=“button button–full-width product__xr-button”
type=“button”
aria-label=“{{ ‘products.product.xr_button_label’ | t }}”
data-shopify-xr
data-shopify-model3d-id=“{{ media.id }}”
data-shopify-title=“title”
data-shopify-xr-hidden
>
{% render ‘icon-3d-model’ %}
{{ ‘products.product.xr_button’ | t }}
{%- else -%}
{%- endif -%}
{%- endif -%}
|
| - |