How can I add video with Custom HTML on home page.

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… :disappointed_face:

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

Thanks

Hi @Perlasblancas

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:


Long story short, must be like this: http://joxi.ru/Y2Ly3ndI74yqYA

Hope that helps you.

1 Like

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.

1 Like

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?

1 Like

Hi @Anonymous

It worked! :slightly_smiling_face: 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:


  1. 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.

1 Like

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 :disappointed_face:

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).

Quick video guide: