Shopify themes, liquid, logos, and UX
Hello,
I am using the Narrative theme, and I want to put a video on the home page. But I don't want to have to use Youtube or Vimeo links. But a video that I have already saved in the archives.
I have been told that this can be done by adding "Custom Content" and from there selecting Custom HTML. But from there I have no idea....😞
Can you help me with the steps to follow?
Thanks!
Hello,
Follow this example and implement in the theme you are using.
And to make it autoplay you have to pass these attributes in video tag
<video autoplay muted loop playsinline="true" >
Thanks
Thank you very much for your reply, but I don't know exactly where I should insert the example you have given me.
Hey @Perlasblancas
http://joxi.ru/xAeJnPpuRD3ZLr -right here. You will have your own HTML code of the video
Hope that helps you.
Aibek is here from Speedimize.io
Online Store->Narrative->Customize you need to start here:
http://joxi.ru/eAOlXkZu9W0DWr - first of all, add the Custom Content section. After you add it, you must remove the extra blocks or those that you do not need http://joxi.ru/Dr8vXbGuogxve2. After you add Custom HTML http://joxi.ru/E2pVjlYI7E587r
Next, add the HTML code of the video http://joxi.ru/xAeJnPpuRD3ZLr
HTML example below:
<video src="videofile.ogg" autoplay poster="posterimage.jpg">
Sorry, your browser doesn't support embedded videos,
but don't worry, you can <a href="videofile.ogg">download it</a>
and watch it with your favorite video player!
</video>
Long story short, must be like this: http://joxi.ru/Y2Ly3ndI74yqYA
Hope that helps you.
Hi @Anonymous,
I still can't get it. Maybe I'm doing something wrong... I attach a photo.
Hope this time it's will be clear.
Upload the video into your Files section of your Shopify store. (Click “Settings” > Click “Files”). Make sure the video file is either a .MP4 or .WEBM.
Source: https://community.shopify.com/c/Shopify-Design/How-to-use-HTML-to-add-videos/td-p/606132
If everything is done then make sure that the section is not hidden http://joxi.ru/82QDkyRSw0YgRm. It seems to us that you have hidden it or not?
Hi @Anonymous
It worked! 🙂 But please take this opportunity to ask you another question about the video:
1. What do I have to do so that the video is continuously on play without having to restart the website?
2. I see that in the mobile version it is not visible.
Thank you very much for your good explanations!
Hey @Perlasblancas
So regarding your questions:
1. What do I have to do so that the video is continuously on a play without having to restart the website?
To play the video automatically, use the autoplay attribute.
https://www.w3schools.com/tags/att_video_autoplay.asp
To make the video play again all the time after the end, use the loop attribute
https://www.w3schools.com/tags/att_video_loop.asp
Example below:
<video controls autoplay loop>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
2. I see that in the mobile version it is not visible.
To check, first, switch to the mobile version http://joxi.ru/Dr8vXbGuogNLx2.
Make sure that this section is not hidden. By default, the video should work on the mobile phone too. If something is wrong, can you send us a screenshot? We'll check it out. And HTML code video as well.
Hope that helps you.
Hi @Anonymous
Thank you very much for your patience and explanations.
I can't get the video to play all the time after the end, using the loop attribute... What exactly should I put and where...?
And regarding the mobile issue, if I look at my website on my mobile, the video does not appear. You see a big white space 😞
Thanks!
Any fix for the mobile issue? I'm in the same position.
While in the Customization tool of Shopify both the browser and mobile mode shows video fine.
Visiting the store the video works fine on PC but won't show at all on mobile (using Chrome on iPhone).
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024