Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi i want to autoplay video in Dawn theme. And i want to remove play/pause icon from it. Thankyou
Hello.
You can insert this code
<video class="video-background" loop="" muted="" no-controls="" autoplay="" src="VIDEO URL HERE" playsinline="" style="transform: scale(1.27563, 1.27563);">
<source type="video/mp4" src="">
</source></video>
<style>
.video-background {
width: 100%;
padding-top: 200px;
opacity: 0.6;
height: auto;
left: 0;
top: 0;
}
</style>
Thanks for your reply. Please guide me where i have to paste this link. also let me know should i enter my video url in the code where it says src ?
Yes, you will put the video source in the src between the " ".
if your theme have a custom section you can make a custom section with html and paste it there.
If you're Danish as your name states you can contact us in a private message in Danish as it's our main language.
Thanks for your kind words for me. I did not try the code because I switched to other theme. Just saw your message about my name so i wanted to reply . Yeah my name is Danish (your language name) but it means in my language is Intelligent .
hi, i tried the code but the video doesnt fit in the mobile view. and also, there is a opaque-ness to it. pls advice thank yoU!
Hey did you ever find a solution to this I am looking for the same answer
Hello @jerseycitykicks
Please send URL to your store.
Hello @LukePlayhood
Please send your URL
Hi There!
Where would i paste this code? somewhere in the video.liquid file? Or should i create a whole separate liquid file?
This worked perfectly for me, thank you! 😁
Looks like this is bug in Down theme
But
You can try replace this part of code in product-thumbnail.liquid
<template>
{%- 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'
echo media | media_tag: image_size: "2048x", autoplay: true, loop: loop, controls: true, preload: "none", autoplay: true
when 'model'
echo media | media_tag: image_size: "2048x", toggleable: true
endcase
-%}
</template>
To this one
{% if media.media_type != 'video' %}
<template>
{%- 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 '<video autoplay loop muted playsinline width="100%"><source src="'
echo video_url
echo '" type="video/mp4"> </video>'
when 'model'
echo media | media_tag: image_size: "2048x", toggleable: true
endcase
-%}
{% if media.media_type != 'video' %}
</template>
{%- endif -%}
Almost!
But does not… really work… 😕
Questions:
• is there a video file size limit to enable "autoplay: true"??? Mine are 17 Mo ~.
• when does autoplay… play? at the end of the complete loading or imediately ?
• I see now autoplay is working on product page, but the play button remains visible……
• does not autoplay on hover as 2nd image on collection page (product grid)…
… a bit lost.
Ok, then try this one
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 %}
<noscript>
{%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
<span class="product__media-icon motion-reduce">{% render 'icon-play' %}</span>
<div class="product__media media" style="padding-top: {{ 1 | divided_by: media.preview_image.aspect_ratio | times: 100 }}%;">
<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 }}"
>
</div>
<a href="{% if media.media_type == 'video' %}{{ media.sources[1].url }}{% else %}{{ media | external_video_url }}{% endif %}" class="product__media-toggle">
<span class="visually-hidden">{{ 'products.product.video_exit_message' | t: title: product.title | escape }}</span>
</a>
{%- else -%}
<div class="product__media media" style="padding-top: {{ 1 | divided_by: media.preview_image.aspect_ratio | times: 100 }}%;">
<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 }}"
>
</div>
{%- endif -%}
</noscript>
<modal-opener class="product__modal-opener product__modal-opener--{{ media.media_type }} no-js-hidden" data-modal="#ProductModal-{{ modal_id }}">
<span class="product__media-icon motion-reduce" aria-hidden="true">
{%- liquid
case media.media_type
when 'video' or 'external_video'
render 'icon-play'
when 'model'
render 'icon-3d-model'
else
render 'icon-zoom'
endcase
-%}
</span>
{% if media.media_type != 'video' %}
<div class="product__media media media--transparent" style="padding-top: {{ 1 | divided_by: media.preview_image.aspect_ratio | times: 100 }}%;">
<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 }}"
>
</div>
<button class="product__media-toggle" type="button" aria-haspopup="dialog" data-media-id="{{ media.id }}">
<span class="visually-hidden">
{%- if position == 'featured' %}
{{ 'products.product.media.open_featured_media' | t }}
{%- else -%}
{{ 'products.product.media.open_media' | t: index: position }}
{%- endif -%}
</span>
</button>
{%- else -%}
{%- liquid
assign videos = product.media | where: "media_type", "video"
assign video_url = videos[0].sources[1].url
echo '<video autoplay loop muted playsinline width="100%"><source src="'
echo video_url
echo '" type="video/mp4"> </video>'
-%}
{%- endif -%}
</modal-opener>
{%- if media.media_type != 'image' -%}
{%- if media.media_type == 'model' -%}
<product-model class="deferred-media media media--transparent no-js-hidden" style="padding-top: 100%" data-media-id="{{ media.id }}">
{%- else -%}
<deferred-media class="deferred-media media no-js-hidden" style="padding-top: {{ 1 | divided_by: media.aspect_ratio | times: 100 }}%" data-media-id="{{ media.id }}">
{%- endif -%}
{% if media.media_type != 'video' %}
<button id="Deferred-Poster-Modal-{{ media.id }}" class="deferred-media__poster" type="button">
<span class="deferred-media__poster-button motion-reduce">
{%- if media.media_type == 'model' -%}
<span class="visually-hidden">{{ 'products.product.media.play_model' | t }}</span>
{%- render 'icon-3d-model' -%}
{%- else -%}
<span class="visually-hidden">{{ 'products.product.media.play_video' | t }}</span>
{%- render 'icon-play' -%}
{%- endif -%}
</span>
<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 }}"
>
</button>
{%- endif -%}
{% if media.media_type != 'video' %}
<template>
{%- 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 '<video autoplay loop muted playsinline width="100%"><source src="'
echo video_url
echo '" type="video/mp4"> </video>'
when 'model'
echo media | media_tag: image_size: "2048x", toggleable: true
endcase
-%}
{% if media.media_type != 'video' %}
</template>
{%- endif -%}
{%- if media.media_type == 'model' -%}
</product-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 }}
</button>
{%- endif -%}
{%- else -%}
</deferred-media>
{%- endif -%}
{%- endif -%}
And 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' -%}
<div class="product-media-modal__model" data-media-id="{{ media.id }}">
<product-model class="deferred-media media media--transparent" style="padding-top: min(calc(100vh - 12rem), 100%)">
{%- else -%}
<deferred-media class="deferred-media media" style="padding-top: min(calc(100vh - 12rem), {{ 1 | divided_by: media.aspect_ratio | times: 100 }}%)" data-media-id="{{ media.id }}">
{%- endif -%}
{% if media.media_type != 'video' %}
<button id="Deferred-Poster-Modal-{{ media.id }}" class="deferred-media__poster" type="button">
<span class="deferred-media__poster-button motion-reduce">
{%- if media.media_type == 'model' -%}
{%- render 'icon-3d-model' -%}
{%- else -%}
{%- render 'icon-play' -%}
{%- endif -%}
</span>
<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 }}"
>
</button>
{%- endif -%}
{% if media.media_type != 'video' %}
<template>
{%- 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 '<video autoplay loop muted playsinline width="100%"><source src="'
echo video_url
echo '" type="video/mp4"> </video>'
-%}
{%- when 'model' -%}
{{ media | media_tag: image_size: "2048x", toggleable: true }}
{%- endcase -%}
{% if media.media_type != 'video' %}
</template>
{%- endif -%}
{%- if media.media_type == 'model' -%}
</product-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 }}
</button>
</div>
{%- else -%}
</deferred-media>
{%- endif -%}
{%- endif -%}
Thats works fine for me.
And don't forget to try my App "Gerda Analytics"
Hope you will enjoy it;)
Hey,
I have the same goal. I would like to embed lopped and soundless video into my main page, exactly the same as on Burrow's website: https://burrow.com/nomad-fabric/sofa-sectional?sku=NSC-CG-3-MD-DW&tufted=TF (scroll down a little to see section "Durable enough to everyday drama"
I am new to coding and Shopify so I would really appreciate it if can you explain it to a 5year old. Where I should paste the URL of the video I uploaded to the Shopify files section.
I also use DAWN 2.0 template.
Many thanks in advance!
Nick
Hello
Ok, try this solution
First of all open your online store Themes themplate and click customize
Then at left menu click Add Section
Chooses "Custom Liquid"
And paste this code
<video width="100%" class="" loop="" playsinline="" autoplay="" muted="" preload="auto">
<source type="video/mp4" src="https://gerda.life/img/short.mp4">
</video>
Don't forget to replace "https://gerda.life/img/short.mp4" in src to your video link.
Thank you so much for your help and so quick reply!
It works! But now I would like to be able to do 2 things:
A) Make it smaller let's say 60%, which I managed to do, but the video is aligned to the left instead of being centered. So my first question is: how to center smaller video.
B) Another question would be about adding a text nest to it, in the same way, you could see at burrow.com. So, a smaller video on the left (with or without margin) and text to the right of this video.
I think you are looking something like this
https://stackoverflow.com/questions/34509273/two-columns-centered-content-with-divider
Hi, link from vimeo or youtube wont work here correct? If so, how should I link the video? Thanks in advance!
One way is to upload to Shopify: Settings > Files > Upload files. The only drawback is you can upload here file with a max size of 20MB... which for me is not enough, however, maybe for you will be fine.
PS. If someone knows where to upload bigger size videos, please share with us! 🙂
I am using google cloud.
I rent a server there and store files
Thank You so Much, this code worked perfectly.
The solution worked perfectly for my store! Thanks for the help Vertalm!
Hi, Can someone please tell me what Shopify theme Burrow.com is using? I am fed up with Dawn and am looking to change. The video issue is only one of many lacking features with Dawn in my opinion.
@vertlam 10-27-2021
thanks
I haven't tried anything with your second code yet because I had stuff to do and your code was to big for me to understand.
So : can I paste the two codes at the end of each of the files "product-thumbnail.liquid" and "And product-media.liquid"?
Or must I specifically target a place in those codes (.liquid) to paste your code ?
Thanks for the info !
Jean-Philippe
This is full code pages
Just replace your code to my
But be careful.
If you have any changes already in your code, some applications are installed, then something may break.
Hello
What do you mean?
Hover on another pages?
May be an example, or can you show page of your store?
I can share my shop, I made it live today
strombolini.shop
The question was about the autoplay on hover in "featured collection" if you had selected that option.
For now, the hover shows the 2nd image, which is a video, but does not plays it… 😕
Im not shure, but...
For now product pages video working fine at your store.
If you would like to add video block to another pages then please try this solution
1. Add custom liquid with such code
<video autoplay="" loop="" muted="" playsinline="" width="100%"><source src="https://cdn.shopify.com/s/files/1/0559/3186/3238/files/vera_video.mp4" type="video/mp4"> </video>
2. Upload your video throught this interface https://www.shopify.com/admin/settings/files
3. Copy the link
4. Replace this link https://cdn.shopify.com/s/files/1/0559/3186/3238/files/vera_video.mp4 to url of your video file.
Hope it helps.
Sorry if i don't undesrstand question. Your site French, my native language Russian and my level of English not so good)))
Lol !
I join a screenshot.
Below, the homepage. I took the screenshot while on rollover on the first product image in that featured-collection section.
Below is the screenshot of the parameters of that section in the admin of the site.
I wondered, while I activated the display of the second product image on hover ("afficher la deuxième image en survol"), that image - which is a video - did not auto play.
🙂
but, again I maybe mix threads in shopify help… I think i will get a rest now.
Ahh, ok, i see.
Actually yes, my code doesn't activate video in such case.
Will think about that
Thank you so much, Thats worked fine for me.. I have scenario can you please help me on that?
I have 5 pictures having 2 variants
assign 1 image to 1 variant and assign another image to another variant.
Total Pictures are showing 4 for each product and when we can the variant the image is changed and the rest 3 image visible to both variant
is it possible to show all 5 pictures but when we choose variant the display picture change to assign product
Thanks
Thankyou
This worked for me on the website but on my phone the video autopays, but there is still a pause icon do you know how go get rid of it?
Thanks
Hello,
I'm trying to loop and autoplay videos on my product page, I've tried with your code but unfortunately, I couldn't make it work.
this is my product page with video in it.https://ggbys7u5vt2jaujw-68210557218.shopifypreview.com/products/cappotto-otello-doppiopetto-in-lana...
Can you help me figure out how to do it?
Thank you so much!
I have added this to new Dawn theme but my product video's on mobile view are now out of line with images. Any advice?
Can anyone help me with this please?
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024