Shopify themes, liquid, logos, and UX
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
// 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;}
}
Solved! Go to the solution
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
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.
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
Thank you. Where do I make change to position Text in the center,change font type and size?
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.
Thank you
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024