Placing video at the top of the page? Any help please :)

Solved
Highlighted
Tourist
8 0 2

Hi,

So today I managed to create and upload a video onto my Shopify website. 

 

It was more than 20MB so I had to upload it onto Internet Archive, which was fine and I got an MP4 link.

 

So my HTML Code looks like this:

<div class="page-width">
<header class="section-header text-center">
<div class="video-container">
<span class="video_text"></span>

 

<video class="video-background" loop="loop" muted="" autoplay="autoplay" src="https://ia801505.us.archive.org/25/items/organic-grit-homepage-lander-newest/Organic%20Grit%20Homepa..." width="1000" height="960">
<source src="https://ia801505.us.archive.org/25/items/organic-grit-homepage-lander-newest/Organic%20Grit%20Homepa...">
Your browser does not support our video.
</video>
</div>

<p style="text-align:left"><font size="1">

</font></p></header>
</div>

 

CSS Code

.video-container {
position: center;
position: top;
}
.video-background{padding-top: 55px;}
.video_text {position: absolute;z-index: 9999;top: 50%;font-size: 100px;padding: 10px;}
@media only screen and (max-width: 100px) {
.video_text{top: 5%;font-size: 12px;}
}

 

So far the video works and is doing great, but I want it to be at the very top of this white box its in, even maybe making the white box around it tighter. How would I go about doing this?

I'm new to shopify so please take it easy on me lol.

 

Also below is how it looks like right now so you can see what I'm talking about. I need that video very close if not right onto the main menu. Please let me know!

jimjones95_0-1604274935956.png

 

 

Highlighted
Shopify Partner
9348 1183 3275

Hello, @jimjones95 

Welcome to the Shopify community!
and Thanks for your question.

Please share your site URL,
So I will check and provide a solution here.

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Highlighted
Tourist
8 0 2

https://organicgrit.com/

Below is the password:

Password1

0 Likes
Highlighted
Shopify Partner
9348 1183 3275

This is an accepted solution.

@jimjones95 

Thanks for the details.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.template-index .main-content {margin-top: 0;}
.video-background {padding-top: 0; height: 100%; width: 100%;}
.section-header { margin-bottom: 0;}

 

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Highlighted
Tourist
8 0 2

You sir are a magician! It was taking hours to figure it out but I just gave up lol

 

Are you available for further questions if I DM you or hire for service? Please let me know!

Highlighted
Shopify Partner
9348 1183 3275

@jimjones95 

Thanks for update and support 

yes i have send Personal Message more details 

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing