How to make a video banner loop seamlessly

[Onlinetrap]

Hi everybody! Hope you are having an awesome day! I am having some issues with a video banner as I am editing a store.

The problem is that the video does not loop smoothly when the video is "finished" and is going to start over again, the video flashes black and then starts over again instead of having a smooth transmission and just loop normally. You can see what I mean when visiting the store (link and password below). It is the top banner.

I am trying to get the video to seamlessly loop back to the beginning without displaying a black flash at the end. Instead of having a black flash and then restarting, I want the video to smoothly transition back to the start.

Theme: Effortless version 3.2.0

Store link: https://golfofeurope.myshopify.com/
Password: rtoble

It's a website for a client that I need to finish up asap, so I would really appreciate any help. Thanks a lot in advance, would be awesome to solve this.

[Zqdo]

Did you create this as a custom section?

[Onlinetrap]

Thanks for your reply! And no, it's a "video banner" section that comes with the theme. I added in a YT link to the video.

Here is how it looks from the editor: 

 

[Zqdo]

Hmm. Is this a third-party theme, or did you get this theme from the Shopify Theme Store?

[Onlinetrap]

I got it from the Shopify theme store.

[Zqdo]

Which theme is it?

[Onlinetrap]

The theme is: Effortless version 3.2.0

Here is also access to the store if you want to check:
Store link: https://golfofeurope.myshopify.com/
Password: rtoble 

[Zqdo]

Does it do this with all videos or just this one?

[Onlinetrap]

I only have this video, but I have tried several videos, with different time lengths just to see if it made any difference, but it did not. If you have another solution than using a YT link I am happy to try that as well, as long as the video loops seamlessly. 

[Zqdo]

What I can say, is that it might just be imitating the behavior of YouTube videos. On YouTube, when a video replays, it goes blank for a quick second before looping again.

A workaround you could try, is to make a video in Canva or Premiere Pro, where it's just multiple copies of this video. That would remove the momentary black screen.

You think this could work?

[Onlinetrap]

That makes very much sense, thats probably whats happening! The issue is that the original video is cut and saved from Canva, and it loops seamlessly before I upload it to Youtube, so it is what you are saying.

The issue is that I can't directly add in a video file to the video banner section, I need to upload it to either vimeo, youtube or a place to host it, then copy video link and add it into the video banner section.

The issue is that if I use Vimeo, the play button of the video shows. So I thought YT would be good, but I also noticed that the YT video banner on mobile shows the play button, so I might have to use something else than youtube, but I cant figure out what or how.

[Zqdo]

You could use Vimeo or YouTube, then go into the code and hide the play button, as well as have the video automatically play on page load. Not sure if that would remove the momentary blank pause at the end.

I'm always happy to offer more suggestions, so please, feel free to ask.

[Jessica_Thompso]

I'd like to know how to do that!
- Autoplay
- Come back to beginning of video instead of showing other Youtube video suggestions at the end
- Loop
- Hide play button
- Hide watermark

Thanks!!