Adding video to Dawn theme landing page?

[Nedsko]

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!

[KetanKumar]

@Nedsko 

yes please add custom section on your theme like this Video  

[LitCommerce]

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!

[Nedsko]

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]

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!

[Nedsko]

however this video still contains the buttons on it. I want the video to play like a gif with no timeline or volume buttons. 

[LitCommerce]

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 

[Nedsko]

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?

[LitCommerce]

Hi @Nedsko,

Please add code here:

You can change the height as you like

[Nedsko]

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]

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!

[jds20]

Genius.

[Electric-CC2]

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

[Mimmi1935]

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? 

[KetanKumar]

@Mimmi1935 

can you please share store url

[Mimmi1935]

kristinbe.myshopify.com

but its not open yet, Thanks for trying though🙏

[EcomGraduates1]

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