Custom liquid video

[AI_CR7]

Hi there. I want to add custom code to the 'custom liquid' section. In order to have a video play on loop without needing to push play. Then I would also like to add text on top of the video in the centre. Any support would be appreciated.

Thank you

[steve_michael2]

Hi @AI_CR7 , I hope you are doing well, kindly paste the below code in custom liquid section as well as its css.

<div class="video-container">
  <video autoplay loop muted playsinline>
    <source src="YOUR_VIDEO_URL_HERE.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  <div class="video-overlay">
    <p>Your overlay text goes here</p>
  </div>
</div>

And

.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
}

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

.video-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white; /* Text color */
  text-align: center;
  font-size: 24px; /* Adjust as needed */
  padding: 10px;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  border-radius: 5px; /* Optional: rounds the corners */
}

You can adjust the code according to your need.

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[namphan]

Hi @AI_CR7,

You can refer to the following instructions.

It will help you add Video Banner section and customize everything you want 😊