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.
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
Tags:
blogger
