In Be Yours, you can combine the power of video with the eye-catching design of a hero banner. In this tutorial, we will learn how to create a banner with a video background by using the Video hero section
The Video hero section supports YouTube video, Vimeo video, or your own MP4 video. All you need to do is to copy the URL of the video, then paste it into the Video hero section
On this page
Get YouTube video URL
To copy the URL of a YouTube video:
- On your desktop, right click on the video and select the Copy video URL option
- On the other hand, you can also select the URL in the address bar at the top of the browser and press the Ctrl + C keys or right click and select Copy to copy the link.
Get Vimeo video URL
To copy the URL of a Vimeo video:
- On your desktop, hover the mouse on the video and click the Share button
- A share popup should appear. Click on the Link text box to select, then right click and select Copy to copy the link
Get MP4 video URL
To copy the URL of your own MP4 video, you need to upload them first then get the link. (In case you hosted your video else where, just copy the direct URL and ignore this). Here are the steps:
- From your Shopify admin, go to Settings > Files.
- Click Upload files then select your own MP4 to upload it.
- You may need to wait for a couple of seconds for the upload to be complete. Then click the Copy link button to copy the video URL.
Add the Video hero section
- Within your theme customize panel, click Add section then find the Video hero section (or search for 'Video') then click to add it.
- In your Video hero section, paste the link you just copied in the Video URL box.
- Your video background should be displayed by now.
- For more details about Video hero section and its settings or blocks, you may want to check the documentation here.