Refresh Theme - Video on my slider

[Edgard22]

Hi

Hope you are well 🙂 

My website : www.brasebreizh.fr 

I would like on my website to add this video : https://cdn.shopify.com/videos/c/o/v/0d017d1a80c4403797bd6a5ae12777a7.mp4 

to my slider like this kind of website : https://bar-laruche.fr 

Thanks a lot guys !

[BPJWebDesign]

@Edgard22 - You should be able to add a video. If you go into your admin, click on the field where the current image is and see if there is an option to add a video. If not, you should be able to add a dynamic source. Feel free to reach out if you cannot figure it out, we can assist.   

[sahilsharma9515]

Hi @Edgard22 There are workarounds to accomplish the same as by default refresh theme doesn't have the functionality to add videos in the slider.

1. You can add video section in the theme and replace that section with the slideshow, as currently I can see that you are just using 1 image, so replacing it with video section will be the easy and best workaround.
2. You can add a custom section i.e. you need to add the custom code in your theme according to your needs and made a custom slideshow section where you can add images or videos.
3. You can use the page builder apps that you can find in the shopify app store, to build this functionality.

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[Edgard22]

Hi, thanks but i don't think i will be able to do this alone :s 

[sahilsharma9515]

Hi @Edgard22 I would love to help you, but you need to specify with which option you wanted to go forward.

Best Regards

Sahil

[Edgard22]

The first option 🙂 

[BSSCommerce-B2B]

Dear @Edgard22 ,

I have reviewed your requirement, you just need to e customize theme and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Customize:

Step 2: Add Section (Video) behind header: 

Go to Add section => Custom Liquid and add this script to display your video on theme: 

<video controls width="100%" height="auto">
  <source src="https://cdn.shopify.com/videos/c/o/v/0d017d1a80c4403797bd6a5ae12777a7.mp4" type="video/mp4">
</video>

Step 3: Save and reload home page.

=>> The result: 

Your video display on your theme behind header.

Trust me! You will be able to do this alone! ^^

I hope these instructions will help you. If they are helpful, don't forget to like and mark as the solution.

Have a nice day sir! 

[Edgard22]

Hi 🙂 @BSSCommerce-B2B 

It works perfectly but is there an option to activate auto read video ? thanks a lot 

[Edgard22]

Hi 🙂 @BSSCommerce-B2B 

It works perfectly but is there an option to activate auto read video ? thanks a lot 

[BSSCommerce-B2B]

Hi @Edgard22 , 

It is entirely possible to activate auto read video, sir, and here is the solution:

You need to add the 'autoplay' attribute to the video tag to automatically play the video and the 'loop' attribute to make it repeat after it ends.

<video autoplay muted loop controls width="100%" height="auto">
      <source src="https://cdn.shopify.com/videos/c/o/v/0d017d1a80c4403797bd6a5ae12777a7.mp4" type="video/mp4">
</video>

I hope these instructions will help you. If they are helpful, don't forget to like and mark as the solution.

[Edgard22]

Thanks @BSSCommerce-B2B could you tell me where to put this code ?

[BSSCommerce-B2B]

Hi @Edgard22 ,

You can put this code in Customize theme > Add Section below header: 

Similar my instruction above this post. 

(Step 2: Add Section (Video) behind header: 

Go to Add section => Custom Liquid and add this script to display your video on theme)

I hope these instructions will help you. 

Can you kindly give us a like? This can be a reference for other merchants if they have an issue like you and greatly motivate us to contribute to our community.

Thanks in advance.

[Edgard22]

My bad, it works perfectly on desktop but on mobile, the video is not on autoplay @BSSCommerce-B2B 

[BSSCommerce-B2B · Accepted solution]

Hi @Edgard22 , 

You can add attribute "playsinline" before "control" at custom liquid add section. 

<video id="myVideo" autoplay muted loop playsinline controls width="100%" height="auto">
      <source src="https://cdn.shopify.com/videos/c/o/v/0d017d1a80c4403797bd6a5ae12777a7.mp4" type="video/mp4">
</video>

Btw, The video automatically plays on desktop but not on mobile. This might be due to certain restrictions on mobile browsers regarding autoplaying videos to save data and protect user experience. But once you press play the first time, the video will continue to play automatically. ^^

Like your slider as you want like this kind of website : https://bar-laruche.fr , automatic plays video on mobile still not work. 

I think this is a normal occurrence and not a significant issue. 

Hopes it help! 

Can you kindly give us mark it as a solution? Should you need any further information, please do not hesitate to contact us by tagging directly at Community post.

We will check and let you know soon.

Have a nice day, sir! 

[Edgard22]

One more time : THANKS A LOT 🙂