Global
Confirmed 65,987,629 +464,157 new today Deaths 1,519,571 +8,425 new today Recovered 45,663,480 Active: 18,804,578 Last updated: December 5, 2020 - 1:18 am (+05:30)
Home HTML CSS YouTube Video in Text using Html & CSS only

YouTube Video in Text using Html & CSS only

by Admin
video in text

Do you want to show the video in text using only HTML, CSS, then just put this code in your file?

 

HTML Text

          
 <!-- !Note: YouTube Video start -->
    <section class="bg-video">
            <iframe src="https://www.youtube.com/embed/D7xWXk5T3-g?autoplay=1&mute=1">
            </iframe>
        <h1>
            Youtube Video
        </h1>
    </section>
 <!-- !Note: YouTube Video End-->
        

CSS Text

          
        .bg-video{
            position: absolute;
            height:100%;
            width:100%;
            overflow:hidden;
        }
        h1{
            font-size: 20em;
            position:absolute;
	    top:0;
	    left:0;
	    width:100%;
	    height:100%;
	    display:flex;
	    justify-content:center;
	    align-items:center;
	    color:#fff;
	    background:#000;
	    mix-blend-mode:multiply; 
            margin: 0;
            text-align: center;
        }
        .bg-video iframe{
            position:absolute;
	    top:0;
	    left:0;
	    width:100%;
	    height:100%;
	    object-fit:cover;
        }
        

Leave a Comment

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Decline