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

[Perlasblancas]

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!

[Developer-G]

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

[Perlasblancas]

Thank you very much for your reply, but I don't know exactly where I should insert the example you have given me.

[Anonymous]

Hey @Perlasblancas 

http://joxi.ru/xAeJnPpuRD3ZLr -right here. You will have your own HTML code of the video

Hope that helps you.

[Anonymous]

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:

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

[Perlasblancas]

Hi @Anonymous,

I still can't get it. Maybe I'm doing something wrong... I attach a photo.

[Anonymous]

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?

[Perlasblancas]

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!

[Anonymous]

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.

[Perlasblancas]

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!

[teewear]

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