Adding Text On Top Of A Video Banner | Shopify Development

People place video banners on websites instead of static images. Video banners can be more engaging and visually appealing than static banners, and they can also be used to tell a more compelling story.

Why custom code for video banners?

Shopify theme doesn’t provide any section which can be used as a video banner since video banners are more engaging, more people prefer to use videos as banners.

Solution! How to place video banners using YouTube or MP4

Today we are providing a quick solution and sample code, How to place a video banner using YouTube or MP4.

Please watch the below video till the end to understand the code.

Or you can use the below code.

HTML Code for MP4 video

<div class="page-width">
	<div class="posrel">
		<div class="video">
			<video width="100%" height="400" controls autoplay="" muted="">
			  <source src="https://cdn.shopify.com/videos/c/o/v/3df59aef1ee945bfa6dc2b6ed3c3e6b1.mp4" type="video/mp4">
			  Your browser does not support the video tag.
			</video>
		</div>
		<div class="posoverlay">
			<h1>Hello World!</h1>
			<div>This this hello world text.</div>
		</div>
	</div>
</div>

HTML Code for YouTube video

<div class="page-width">
	<div class="posrel">
		<div class="video">
			<iframe width="100%" height="400px" allow="autoplay" src="https://www.youtube.com/embed/uXk3jCAlaEY?modestbranding=1&rel=0&controls=0&autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
		</div>
		<div class="posoverlay">
			<h1>Hello World!</h1>
			<div>This this hello world text.</div>
			
		</div>
	</div>
</div>

CSS Code

<style>
	.posrel{position:relative;}
	.video{display: block; margin: 0 auto; width: 100%; height: 50%; z-index:1; position:relative;}
	.posoverlay{position:absolute; top:0; bottom:0; right:0; left:0; z-index:2; padding:10px; background:rgba(0,0,0,0.5); color:#fff; text-align:center;}
	.posoverlay h1{color:#fff;}
</style>

Hope the code will help you…

Have any queries or issues comment on the YouTube video we will try to help you ASAP.

Click here to view it in action