Adding a Video Banner or Background Section

Adding a Video Banner or Background Section

See Other Products

Compatibility: All Shopify themes

Add a video banner in your home page. I would suggest using your own video file and not getting a youtube video or any other external source. I believe it makes it authentic when using your own video. 

To Start:

1. You need to go to the code editor. From your admin store, click Online Store > Themes > Actions > Edit code. 

2. Open the Sections Folder and create a new section. Name it whatever you want, then  replace the default code with the code below. Click SAVE.

<div class="videoBannerContainer">
<video autoplay muted loop playsinline none>
<source src="{{section.settings.video_url}}" type="video/mp4">
Your browser is not supported to play the video!
</video>
</div>
<style>
.videoBannerContainer {
width: 100%;
display: flex;
overflow: hidden;
}

.videoBannerContainer > video {
width: 100%;
}
</style>
{% schema %}
{
"name": "Video Banner",
"presets": [
{
"name": "Video Banner"
}
],
"settings": [
{
"type": "text",
"id": "video_url",
"label": "Video Url",
"info": "Paste the link from your file."
}
]
}
{% endschema %}

 

4. All you have to do is add the file link from your file. To get the file link watch this video below, and jump to 0:48. 

Copied!
Voltar para o blogue

1 comentário

hey,
It does not work for me in the Focal theme.
Followed the instructions but can’t see the section in the “customize” area.

Tal

Deixe um comentário