![image.png](https://images.hive.blog/DQmV4PmbiEvrEXZ3FJNPPQ3WHbaJgyMb566MtAMi4vRejBv/image.png)
[sc](https://pixabay.com/photos/programming-html-css-javascript-1873854/)

Learning to become a front-end engineer or a full-stack engineer comes with a lot of work. Learning HTML, CSS, JavaScript, Tailwind or Bootstrap, ReactJS and NodeJS + express and others. There are a lot of things to keep up with and learning CSS seems not too important because of the dynamism in JavaScript. However, the UI and the front depend on the CSS used. So, that is why many people still find themselves stuck when there is too much styling to do in a UI design. 

I do not really like to use any style frameworks like bootstrap or tailwind lately. I just love the freedom of using pure CSS and lessening the loads in node modules. In part of the landing page I am currently working on, there is a section where there is an animation under a text and it got me thinking about how to achieve it for a while but I found a way out and I am sharing it here. 

I am using react and installed the react-html5video package through npm. The same work with normal HTML as the purpose of react-html5video is to use videos in JSX like HTML. So you could install react

```
npx create-react-app my-app

```
```
npm install react-html5video --save
```

**This is the JSX**
The source is the imported video name. 
The video and the h1 must be in the same div. 
```
<div className='bull3_vid-banner'>
           <Video className="video" autoPlay loop muted>
              <source src={Colorful} type="video/mp4"/>
           </Video>           
           <h1>Team</h1>
           </div>
```

**CSS**
```
.bull3_vid-banner {
   margin-top: 20rem;
   position: absolute ;
   width: 100%;
   height: 100vh;
   overflow: hidden;
   display: flex;
   justify-content: center ;
   align-items: center;
}


.bull3_vid-banner .video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}


.bull3_vid-banner h1 {
   margin-top: 0rem;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #fff;
   font-size: 200px;
   text-align: center ;
   color:#000000;
   line-height: 100vh;
   mix-blend-mode: screen;
}
```


The result. 

https://youtu.be/RQHslKXK4jE



Posted using [Proof of Brain](https://www.proofofbrain.io/@tykee/how-to-embed-video-in-text-in-css)