position video to the right on desktop

Jferguson1
Explorer
80 3 6

Hi there,

 

I'm trying to position the video i have on my home page to the right of the screen so the heading and text is side by side with the video (rather than the video taking up the whole screen).

 

Will buy you a coffee.

 

https://www.tryy.co.uk

pw - help

 

 

Replies 5 (5)

deepaksharma
Shopify Partner
448 62 91

Hello @Jferguson1 

Hope you are doing well

 

May I suggest how about placing the the text on the right side of the video itself, we will add an overlay to make the text more visible how that sounds?

 

We can go with your idea as well you.

 

 

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com
Jferguson1
Explorer
80 3 6

Hi,

 

I would like the text to sit beside the video for a few reasons - 1 for personal aesthetics, and also because of the reduced quality the video holds when blown up to that size on desktop.

 

Many thanks  

deepaksharma
Shopify Partner
448 62 91

Hello @Jferguson1 

 

try this code for text with video if you need any css help I will alter it

 

I have already added video source of your video change the link for button.

 

<style>
  .cust-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: black;
  }

  .cust-video-container {
    flex: 1;
    position: relative;
    height: 500px;/* Adjust Height*/
    overflow: hidden;
  }

  .cust-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cust-text-container {
    flex: 1;
    padding: 20px;
    color: white;
    font-size: 24px;
    text-align: left;
  }

  .cust-title {
    margin-bottom: 20px;
color:white;
  }

  .cust-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
  }
</style>

<div class="cust-container">
  <div class="cust-text-container">
    <h2 class="cust-title">Your text goes here</h2>
    <a href="your-link" class="cust-button button button--primary">Shop Now</a>
  </div>
  <div class="cust-video-container">
    <video class="cust-video-bg" autoplay loop muted>
      <source src="https://cdn.shopify.com/videos/c/o/v/16e233154a5c48fa9108b1ef792b3a7d.mov" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </div>
</div>

 

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com
Jferguson1
Explorer
80 3 6

hi,

 

i think i just want to reduce the size of the video for desktop and position it to the right of the screen, allowing the image with text content block to sit beside it on the left.

deepaksharma
Shopify Partner
448 62 91

Hey there @Jferguson1 

 

I have created a sample dummy code you can adjust the css according to your need if you find any difficulty reply to this thread.

<style>
  .cust-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .cust-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
  
  .cust-text-container {
    position: absolute;
    top: 0;
    left: 10%;
    padding: 20px;
    color: white;
    font-size: 24px;
    text-align: left;
    z-index: 1;
  }
  .cust-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
}
</style>
  <div class="cust-video-container">
    <div class="cust-overlay"></div>
    <video class="cust-video-bg" autoplay loop muted>
      <source src="your-video-link" type="video/mp4">
      Your browser does not support the video tag.
    </video>
    <div class="cust-text-container">
      <h2 class="cust-title">Your text goes here</h2>
      <button href="your-link" class="cust-button button button--primary">Shop Now</button>
    </div>
  </div>

 

If you are unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

 

Hopefully, it will help you. If yes then Please don't forget to hit Like and Mark it as the solution!

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com