Video Background with objects on top

Video Background with objects on top

mleinen
New Member
10 0 0

I am looking for a way to have a video background on top of my website with objects such as a logo or logos (images) and text... I can make a straight video work but there no way to add objects on top.  Any help would be appriciated!

Replies 5 (5)

parth_ghelani
Shopify Partner
74 11 12

Hello @mleinen 

Can you please share the store URL and password (if need), so i can check and give you the best suggestion ?

Parth Ghelani

pwcsangeeta
Shopify Partner
31 3 7

Hello @mleinen 

1. Add the Video Background
First, add the video as a background. You can do this by creating a new section or editing an existing one.

HTML/Liquid:

1.Login to your Shopify admin panel.

2.Navigate to Online Store > Themes.

3.Find the Dawn theme and click on "Actions" > "Edit code".

4.Create a new section:

1.Go to the sections folder and click "Add a new section".
2.Name it video-background.
3.Add the following code to the new section (video-background.liquid):

<section class="video-background-section">
  <div class="video-container">
    <video autoplay muted loop id="myVideo">
      <source src="{{ 'your-video-file.mp4' | asset_url }}" type="video/mp4">
      Your browser does not support HTML5 video.
    </video>
  </div>
  <div class="overlay-content">
    <img src="{{ 'your-logo.png' | asset_url }}" alt="Lindsay Designs Logo" class="logo">
    <h1 class="overlay-text">Welcome to Lindsay Designs</h1>
  </div>
</section>

Replace 'your-video-file.mp4' and 'your-logo.png' with the actual file names of your video and logo stored in your Shopify assets.

2. Add CSS to Style the Section
Add the CSS to position the video and overlay content.

CSS:

1.Go to the assets folder and open theme.css or theme.scss.liquid.
2.Add the following CSS code:

.video-background-section {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.video-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}

#myVideo {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
    transform: translate(-50%, -50%);
}

.overlay-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
}

.logo {
    max-width: 200px;
    margin: 0 auto 20px auto;
}

.overlay-text {
    font-size: 36px;
    font-weight: bold;
}

 

3. Include the New Section in Your Theme
1.Go to the templates folder and open index.liquid.
2.Add the new section to your homepage:

{% section 'video-background' %}

Save all the changes and preview your website. You should see a video background with the logo and text on top of it.

Buy me a Pizza
- If helpful then please Like and Accept Solution.

Thanks

 

 

 

 

 

mleinen
New Member
10 0 0

1.Go to the assets folder and open theme.css or theme.scss.liquid

When i go to assets i do not have this file....

mleinen
New Member
10 0 0

Also ... when i go to add my mp4 file its not supported as a file type??? i went to assets add new and it wont take an mp4.  If i give you my login do you think you can get it working on there?  the link to my mp4 is https://moldesigngroup.com/storefull.mp4 

mleinen
New Member
10 0 0

im trying to get the theme to look like this https://moldesigntest.com/thetradingcardclub/  please look at the problems i had below....