Adding video to Dawn theme landing page?

Nedsko
Excursionist
28 0 7

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!

Replies 11 (11)
KetanKumar
Shopify Partner
31328 3130 10497

@Nedsko 

yes please add custom section on your theme like this Video  

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
LitCommerce
Astronaut
1266 285 271

Hi @Nedsko,

With Dawn theme, you can add it by following steps:

- Step 1: Upload video to youtube and copy iframe. Refer: 

Screenshot.png

- Step 2: Then you add the HTML section and paste the code :

Screenshot.png

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
Nedsko
Excursionist
28 0 7

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/ 

LitCommerce
Astronaut
1266 285 271

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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
Nedsko
Excursionist
28 0 7

however this video still contains the buttons on it. I want the video to play like a gif with no timeline or volume buttons. Screenshot 2022-04-27 at 19.15.24.pngScreenshot 2022-04-27 at 19.15.30.pngScreenshot 2022-04-27 at 19.15.15.png

LitCommerce
Astronaut
1266 285 271

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 

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
Nedsko
Excursionist
28 0 7

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?

 

mobile .jpg

 

LitCommerce
Astronaut
1266 285 271

Hi @Nedsko,

Please add code here:

Screenshot.png

You can change the height as you like

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
Nedsko
Excursionist
28 0 7

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?

LitCommerce
Astronaut
1266 285 271

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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
Blizzard21
Shopify Partner
70 2 1

this might be a solid solution for you to add media to dawn  homepage 

helping others 🙂