Solved

Adding Text Overlay to a Video in Shopify: A Guide

viky
Excursionist
40 1 4

I have inserted video on my page. It is working as expected. I want add Text over the video. How do I do it?

My Page code

<div class="page-width">
  <header class="section-header text-center">
    <h1>{{ page_title }}</h1>
   
    <span class="video_text">Your text goes here</span>
    <video class="video-background" loop="loop" muted="" autoplay="autoplay"  
           style="transform: scale(1.27563, 1.27563);" >  
            type="video/mp4" />
Your browser does not support our video.
     </video>
        <p style="text-align:right";><font size=1>credit:videezy.com</font</p>
 
    </div>
 
 
Theme.scss.liquid

// Header Video CSS


.video-background{padding-top: 55px;}
.video_text {position: absolute;z-index: 9999;top: 50%;font-size: 25px;padding: 10px;}
@media only screen and (max-width: 767px) {
.video_text{top: 5%;font-size: 12px;}
}

Accepted Solutions (2)

Ninthony
Shopify Partner
2329 350 1023

This is an accepted solution.

Add a container around your video and your text, then set the container's position to relative:

 

<div class="page-width">
  <header class="section-header text-center">
    <h1>{{ page_title }}</h1>
   <div class="video-container">
    <span class="video_text">Your text goes here</span>
    <video class="video-background" loop="loop" muted="" autoplay="autoplay"  
           src="https://static.videezy.com/system/resources/previews/000/046/547/original/Stock2018_296.mp4" 
           style="transform: scale(1.27563, 1.27563);" >  
  <source src="https://static.videezy.com/system/resources/previews/000/046/547/original/Stock2018_296.mp4"
            type="video/mp4" />
Your browser does not support our video.
     </video>
    </div>
        <p style="text-align:right";><font size=1>credit:videezy.com</font</p>
 
    </div>

 

CSS:

.video-container {
  position: relative;
}
.video-background{padding-top: 55px;}
.video_text {position: absolute;z-index: 9999;top: 50%;font-size: 25px;padding: 10px;}
@media only screen and (max-width: 767px) {
.video_text{top: 5%;font-size: 12px;}
}

 

This is the same code as you posted just with a container around your video and text and then the video-container css. So either copy and paste it over your old code or make the adjustments as needed

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄

View solution in original post

Ninthony
Shopify Partner
2329 350 1023

This is an accepted solution.

The .video-text style is where you would set that.

.video_text {
  position: absolute;
  z-index: 9999;
  top: 50%;
  font-size: 25px;
  padding: 10px;
}
@media only screen and (max-width: 767px) {
.video_text{
    top: 5%;
    font-size: 12px;
  }
}

 So the styling above the "@media" portion of the code is for your desktop styles. To change the positioning of your text, the properties you're going to want to change are the "top" properties, and you'll want to add a "left property, as well as a transform, say you're trying to center the text:

.video_text {
  position: absolute;
  z-index: 9999;
  top: 50%;
  left: 50%;
  transform: translateX(-50%)translateY(-50%)
  font-size: 25px;
}
@media only screen and (max-width: 767px) {
.video_text{
    top: 5%;
    font-size: 12px;
  }
}

 

The top style for desktop says top: 50%; left 50%. That means align the text halfway from the top of the container, and halfway from the left of the container, and then the transform: translateX(-50%)translateY(-50%) shifts the element half of it's width back to the left and back to the top, as the registration point for the element is the top left corner. Without the transform, the text would be a little over halfway from the top, and a little over halfway from the left.

 

Then for mobile you'd make similar changes to the styles contained in the @media portion of the code.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄

View solution in original post

Replies 4 (4)

Ninthony
Shopify Partner
2329 350 1023

This is an accepted solution.

Add a container around your video and your text, then set the container's position to relative:

 

<div class="page-width">
  <header class="section-header text-center">
    <h1>{{ page_title }}</h1>
   <div class="video-container">
    <span class="video_text">Your text goes here</span>
    <video class="video-background" loop="loop" muted="" autoplay="autoplay"  
           src="https://static.videezy.com/system/resources/previews/000/046/547/original/Stock2018_296.mp4" 
           style="transform: scale(1.27563, 1.27563);" >  
  <source src="https://static.videezy.com/system/resources/previews/000/046/547/original/Stock2018_296.mp4"
            type="video/mp4" />
Your browser does not support our video.
     </video>
    </div>
        <p style="text-align:right";><font size=1>credit:videezy.com</font</p>
 
    </div>

 

CSS:

.video-container {
  position: relative;
}
.video-background{padding-top: 55px;}
.video_text {position: absolute;z-index: 9999;top: 50%;font-size: 25px;padding: 10px;}
@media only screen and (max-width: 767px) {
.video_text{top: 5%;font-size: 12px;}
}

 

This is the same code as you posted just with a container around your video and text and then the video-container css. So either copy and paste it over your old code or make the adjustments as needed

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
viky
Excursionist
40 1 4

Thank you. Where do I make change to position Text in the center,change font type and size?

Ninthony
Shopify Partner
2329 350 1023

This is an accepted solution.

The .video-text style is where you would set that.

.video_text {
  position: absolute;
  z-index: 9999;
  top: 50%;
  font-size: 25px;
  padding: 10px;
}
@media only screen and (max-width: 767px) {
.video_text{
    top: 5%;
    font-size: 12px;
  }
}

 So the styling above the "@media" portion of the code is for your desktop styles. To change the positioning of your text, the properties you're going to want to change are the "top" properties, and you'll want to add a "left property, as well as a transform, say you're trying to center the text:

.video_text {
  position: absolute;
  z-index: 9999;
  top: 50%;
  left: 50%;
  transform: translateX(-50%)translateY(-50%)
  font-size: 25px;
}
@media only screen and (max-width: 767px) {
.video_text{
    top: 5%;
    font-size: 12px;
  }
}

 

The top style for desktop says top: 50%; left 50%. That means align the text halfway from the top of the container, and halfway from the left of the container, and then the transform: translateX(-50%)translateY(-50%) shifts the element half of it's width back to the left and back to the top, as the registration point for the element is the top left corner. Without the transform, the text would be a little over halfway from the top, and a little over halfway from the left.

 

Then for mobile you'd make similar changes to the styles contained in the @media portion of the code.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
viky
Excursionist
40 1 4

Thank you