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

Solved
jimjones95
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

 

 

KetanKumar
Shopify Partner
17141 1858 6418

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
jimjones95
Tourist
8 0 2

https://organicgrit.com/

Below is the password:

Password1

0 Likes
KetanKumar
Shopify Partner
17141 1858 6418

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
jimjones95
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!

KetanKumar
Shopify Partner
17141 1858 6418

@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
CDB1
Tourist
3 0 1

Hi @KetanKumar

I saw your helpful answer to this earlier question and was wondering if you could help!?

I'd like to do exactly the same thing as OP (large full width video at the top of a page [not homepage] whilst still keeping the page width the same for the rest of the text below)

I'm having difficulties swapping in my own video code and working through your original answer.

My video code is:

<p><iframe src="https://player.vimeo.com/video/527772423" width="1280" height="720" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen=""></iframe></p>

And the website page is:

https://faeroes.co.uk/pages/made-in-britain

If there's anyway you can shine some light on what my HTML code and CSS code should look like then I'd be super grateful.

Kind regards, 

Charlie 

 

 

 

KetanKumar
Shopify Partner
17141 1858 6418

@CDB1 

thanks for details 

can you please share us issue images with?

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
0 Likes
CDB1
Tourist
3 0 1

Hi @KetanKumar 

Please see attached the image of the page below. I'm trying to get the video section to fill the top of the page (on desktop and mobile) whilst keeping the text section below the same width.

Thanks for your help!!!!

Screenshot 2021-04-17 at 08.52.44.png

0 Likes
KetanKumar
Shopify Partner
17141 1858 6418

@CDB1 

it can be done some custom code

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
0 Likes