Text Overlay on a video

Solved
Highlighted
Excursionist
26 0 0

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;}
}

0 Likes
Highlighted
Shopify Partner
1436 194 489

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 and accept as 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 :D
1 Like
Highlighted
Excursionist
26 0 0

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

0 Likes
Highlighted
Shopify Partner
1436 194 489

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 and accept as 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 :D
0 Likes
Highlighted
Excursionist
26 0 0

Thank you

0 Likes