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.