Shopify themes, liquid, logos, and UX
Hi, how do I upload my own video onto my dawn theme page. I want it to have these features:
- automatic play when site loads.
- cover full width
- my video will have a dimension ratio of 2:3, optimised for mostly mobile format.
here's a website that has exactly what I want https://gelblaster.com
Thanks you!
yes please add custom section on your theme like this Video
Hi @Nedsko,
With Dawn theme, you can add it by following steps:
- Step 1: Upload video to youtube and copy iframe. Refer:
- Step 2: Then you add the HTML section and paste the code :
Hope it helps!
But the video will still contain all the icons on it like “share” button and “watch later”. I want a seamless video that plays like a GIF but mp4 format. Like the landing page video in website https://gelblaster.com/
Hi @Nedsko,
If so, you can change it to video tag, please do the following steps again:
- Step 1: Upload the video at settings > files and copy the link.
- Step 2: Then you add the HTML section and paste the code. Refer video tag: https://www.w3schools.com/tags/tag_video.asp
Code:
<video width="100%" height="500" controls>
<source src="movie.mp4" type="link video">
</video>
Hope it helps!
however this video still contains the buttons on it. I want the video to play like a gif with no timeline or volume buttons.
Hi @Nedsko,
Please change code:
<video poster="link video" preload="auto" playsinline loop muted autoplay>
<source src="link video" type="video/mp4">
</video>
You can also refer to the properties with the following guide, just add or remove everything will work fine. https://www.w3schools.com/html/html5_video.asp
Thanks for the code! I've tried it now and its exactly what I want, the only problem now is how do I make so the dimensions change to optimise for mobile? how do I change the dimensions of the space the video takes up?
Hi @Nedsko,
Please add code here:
You can change the height as you like
Thank you for getting back to me, I’ll give that a go! Is it possible to have different dimensions for both mobile and desktop?
Hi @Nedsko,
Yes, you can add the following CSS code:
<style>
/* height for desktop */
.banner-home-section video {
height: 500px !important;
}
@media screen and (max-width: 768px) {
/* height for mobile */
.banner-home-section video {
height: 300px !important;
}
}
</style>
Hope it helps!
Genius.
Hello there, are we adding this code to the new liquid in the section or HTML of the page?
I got an error after saving the code, it says: Invalid JSON in tag schema
Is it possible to ask you to fix this On my site? Just One video…I give up trying to figure it out myself. I mean is this a service you could provide?
can you please share store url
kristinbe.myshopify.com
but its not open yet, Thanks for trying though🙏
this might be a solid solution for you to add media to dawn homepage
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024