How To Add Video In Text Effect To Your Blogger Website

As Developer Verify Premium Template

In this blog, I will show you how to add video in text effect to your blogger website. There are many methods on the web to create this type of effect. But some of them are not working properly.  

So I have used the method which is working 100% and also have written step by step guide for this.  

Video In Text Effect To Your Blogger Website.  


Blog Usage: This is the second article about how to monetize your blog, so you should read the first one first to understand this better.  

Outdated UI, boring look and feel and lack of engagement are some of the reasons leading to the decline of blogger blogs. Adding video in text effect can be a cool and easy way to revamp your blog and create a lasting impression.   

In blogging, videos can be your best friend or worst enemy when it comes to traffic generation. If you're doing content marketing, it's crucial to think about video as an additional means of reaching more readers.  

How To Add Video In Text Effect To Your Blogger Website | iong.in



This blog will help you add video in text effect to your blog.  

Bloggers are using different blog tools to make their blog more attractive and increase traffic and search engine ranking. Adding video in a text gives a different effect to blog readers. In this guide you will learn how to add video in text effect to blog.  


Blog Post: How To Add Video In Text Effect To Your Blogger Website.  

Video in text effect - CSS  

  .video-text-container video {
  height: 170px;
  width: 100%;
  object-fit: cover;
}

.video-text-container .text-container {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Bebas Neue", sans-serif;
  font-size: 170px;
  text-transform: uppercase;
  background: #fff;
  color: #000;
  mix-blend-mode: screen;
}


Video in text effect - Font family  

<link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap"
      rel="stylesheet"
    />


Video in text effect - HTML  

<div class="video-text-container">
      <video autoplay loop muted>
        <source src="ADD VIDEO URL" type="video/mp4" />
      </video>

      <div class="text-container">
        <p>Welcome</p>
      </div>
    </div>




Watch Video


We spend our valuable time, energy and money to produce videos and articles for your convenience. Please show some appreciation by subscribing to our YouTube channel and sharing the articles of this blog in your Social Media Profiles. This one second act of yours will help us to grow and inspire us to do something even better in the near future.

Post a Comment

Previous Post Next Post