Welcome to today’s tutorial. In today’s tutorial, we will learn how to use a video as a background for text. Even though this might sound complicated surprisingly this is quite easy to do.
For this tutorial, we will be using HTML, CSS and SVG. We will be generating SVG with some vector editing tools. So you don’t have to worry about that. Now let us begin with the tutorial.
Video Tutorial:
If you prefer to code along with the video tutorial, you can check out the video version of this tutorial down below. Also, you can check out other videos that I post on my youtube channel every alternate day.
Project Folder Structure:
Before starting to code we will check out the project folder structure. The project folder is called – Video In Text Background. Inside this folder, we have two files – index.html and style.css. They are HTML documents and stylesheets respectively.
HTML:
We start with the HTML code. The HTML code consists of a div with a class name container. Inside the container, we have a video element. We set the src attribute of the video to whichever video we like.
We further add attributes like autoplay, muted and loop. Some browsers don’t allow autoplay if the video is not muted. Hence to ensure that the video plays automatically on window load we must add the muted attribute. Also, the loop attribute takes care that the video is played on loop.
Next, we use a vector editing software/tool to create the SVG text. I am using Adobe Illustrator. Though I am using a paid tool, you can find many free alternatives that do the exact same job.
In Illustrator we create an artboard that has the same dimensions as our video or else has the same aspect ratio. After we use a text tool to write the text of our choice and customize the font size. We right-click the text and click on the ‘Create Outlines’ Option.
In the next step, we export this as an SVG file. Now trace the SVG file in your folders and view the page source and copy the code. Paste it into the HTML section and wrap all the paths inside the clipPath tag with id text-path.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Video In Text Background</title>
<!-- Stylesheet -->
<link rel="Stylesheet" href="style.css"
</head>
<body>
<svg
id="Layer_1"
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
width="600"
height="339"
viewBox="0 0 600 339"
>
<clipPath id="text-path">
<path
d="M59,143.09H23.49V66.85H57.81c15.53,0,24.76,7.72,24.76,19.77,0,9.23-5.54,15.2-12.92,17.38a18.48,18.48,0,0,1,14.66,18.35C84.31,135,75.08,143.09,59,143.09ZM54.23,81.73H42.06v16H54.23c6.08,0,9.44-2.72,9.44-7.93S60.31,81.73,54.23,81.73Zm1.3,29.54H42.06V128.1H55.75c6.19,0,9.77-2.82,9.77-8.25S61.72,111.27,55.53,111.27Z"
/>
<path
d="M141.75,81.73H113.63V97.15H138.5v14.34H113.63v16.72h28.12v14.88H95.06V66.85h46.69Z"
/>
<path
d="M201.27,129.62H172.81l-4.56,13.47H148.81L176.4,66.85h21.5l27.58,76.24H205.83ZM187,87.38l-9.34,27.91h18.79Z"
/>
<path
d="M233.52,66.85h18.57v45.62c0,9,4.45,14.22,13.25,14.22s13.46-5.21,13.46-14.22V66.85h18.58v45.51c0,21.06-14.77,31.49-32.37,31.49s-31.49-10.43-31.49-31.49Z"
/>
<path d="M306.28,66.85h59V81.73h-20.2v61.36H326.48V81.73h-20.2Z" />
<path d="M374.59,66.85h18.57v76.24H374.59Z" />
<path
d="M406.62,66.85h49.63V81.73H425.19V97.81h23.24v14.44H425.19v30.84H406.62Z"
/>
<path
d="M465.7,66.85h18.57v45.62c0,9,4.45,14.22,13.25,14.22S511,121.48,511,112.47V66.85h18.56v45.51c0,21.06-14.76,31.49-32.36,31.49s-31.49-10.43-31.49-31.49Z"
/>
<path d="M561.16,66.85v61.9h24.32v14.34H542.59V66.85Z" />
<path
d="M56.52,275.94c-19,0-33.87-9.45-34.5-27.33H44.94c.63,6.8,4.91,10.07,11,10.07,6.3,0,10.33-3.14,10.33-8.31,0-16.37-44.2-7.55-43.95-38.91,0-16.75,13.73-26.07,32.24-26.07,19.27,0,32.24,9.57,33.12,26.45H64.33c-.38-5.67-4.41-9.07-10.2-9.19-5.16-.13-9.07,2.51-9.07,8.06,0,15.36,43.7,8.43,43.7,38C88.76,263.6,77.18,275.94,56.52,275.94Z"
/>
<path
d="M142.78,185.64c21,0,36.9,11.84,41.94,31H161c-3.65-7.55-10.32-11.33-18.51-11.33-13.22,0-22.29,9.82-22.29,25.44s9.07,25.44,22.29,25.44c8.19,0,14.86-3.78,18.51-11.34h23.68c-5,19.14-20.91,30.86-41.94,30.86-26.06,0-44.45-18.52-44.45-45S116.72,185.64,142.78,185.64Z"
/>
<path
d="M252.09,203.9H219.47v17.89h28.84v16.62H219.47V257.8h32.62v17.26H197.94V186.65h54.15Z"
/>
<path
d="M345.15,186.65v88.41H323.62l-36-54.53v54.53H266.07V186.65H287.6l36,54.78V186.65Z"
/>
<path
d="M414.91,203.9H382.3v17.89h28.84v16.62H382.3V257.8h32.61v17.26H360.76V186.65h54.15Z"
/>
<path
d="M465,186.65c21.66,0,32.49,12.47,32.49,27.83,0,11.08-6,21.54-19.64,25.57l20.4,35H474l-18.38-33.38h-5.17v33.38H428.89V186.65Zm-1.26,17.88H450.42v21.92h13.35c8.06,0,11.84-4.16,11.84-11.09C475.61,208.82,471.83,204.53,463.77,204.53Z"
/>
<path
d="M504.07,186.65H528.5l17.12,37,17-37H586.8l-30.6,59.19v29.22H534.67V245.84Z"
/>
</clipPath>
</svg>
<div class="container">
<video src="scenery.mp4" autoplay muted loop></video>
</div>
</body>
</html>
CSS:
Now we code the CSS. We start by discarding any paddings and margins from the body. Following this, we set the height to 100vh and display it to the grid. The purpose of setting the display to the grid is so we can centre the video using the place-items property.
Next, we set the dimensions of SVG to zero as we don’t need the SVG element but just its ID.
Now for the container, we set the clip-path property to URL consisting of the id text-path. This property will clip the video into the shape of the text and you will get the desired effect.
Next, we set the width of the container to 600px. Lastly set the width of the video to 100%. That’s it for this tutorial.
body {
padding: 0;
margin: 0;
height: 100vh;
display: grid;
place-items: center;
}
svg {
height: 0;
width: 0;
}
.container {
clip-path: url(#text-path);
position: absolute;
width: 600px;
transform: translateZ(0);
}
video {
width: 100%;
}
pls attach code also
its a humble request pls upload the code