How can I position a homepage video to the right on desktop?

[Jferguson1]

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

[deepaksharma]

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.

[Jferguson1]

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]

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>

[Jferguson1]

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]

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!