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

Perlasblancas
New Member
6 0 0

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!

0 Likes
Guleria
Shopify Partner
1441 296 410

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

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
0 Likes
Speedimize
Shopify Partner
289 46 122

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. 

We Speedimize your store
Have a problem with speed performance, send me email here: hello@speedimize.io


If our advice was helpful please LIKE or ACCEPT SOLUTION
0 Likes
Perlasblancas
New Member
6 0 0

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

0 Likes
Speedimize
Shopify Partner
289 46 122

Hey @Perlasblancas 

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

Hope that helps you.

We Speedimize your store
Have a problem with speed performance, send me email here: hello@speedimize.io


If our advice was helpful please LIKE or ACCEPT SOLUTION
0 Likes
Perlasblancas
New Member
6 0 0

Hi @Speedimize,

 

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

 

Perlasblancas_1-1626085442072.png

 

0 Likes
Speedimize
Shopify Partner
289 46 122

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?

We Speedimize your store
Have a problem with speed performance, send me email here: hello@speedimize.io


If our advice was helpful please LIKE or ACCEPT SOLUTION
0 Likes
Perlasblancas
New Member
6 0 0

Hi @Speedimize 

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!

0 Likes
Speedimize
Shopify Partner
289 46 122

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.

We Speedimize your store
Have a problem with speed performance, send me email here: hello@speedimize.io


If our advice was helpful please LIKE or ACCEPT SOLUTION
0 Likes
Perlasblancas
New Member
6 0 0

Hi @Speedimize 

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

 

Perlasblancas_0-1626196303511.png

 

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!

0 Likes