Jump to content
Please Use CODE Tags

How to do this

Neutrideo
By Neutrideo
in Programming
 Share
Posted

Yo, How do I put a video behind text like on https://ryois.me/. My code so far is seen below 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Test website</title>
</head>
<style>
#Heading01 {
	color: skyblue;
	font-family: verdana;
	font-size: 160%;
    text-align: center;
}
#p01 {
	color: lightskyblue;
	font-family: courier;
	font-size: 170%;
	border: 10px solid white;
	padding: 30px;
	text-align: center;
	}
ul#menu li {
	display:inline;
	font-size: 170%;
	border: 10px;
	padding:0 320px;
	color: lightskyblue;
	}
</style>
<body>
	<h1 id="Heading01">My name is <em>Tristan</em></h1>
	<p id="p01"><strong>My goal is to make the world a better place by taking away the middleman</strong></p>
<ul id="menu">
	<li>Twitter</li>
	<li>Discord</li>
</ul>
</body>
</html>

I have the video saved in the same directory as the html file (mp4)

Link to comment
https://linustechtips.com/topic/911640-how-to-do-this/
Share on other sites
Link to post
Share on other sites
Posted

If you're using HTML5 (and you probably should), you can try the video tag. There's a tutorial at https://www.w3schools.com/html/html5_video.asp

 

Only certain formats are supported depending on the browser, however.

I have a blog! And a list of guides I've posted

Link to comment
https://linustechtips.com/topic/911640-how-to-do-this/#findComment-11194889
Share on other sites
Link to post
Share on other sites
Posted
  • Author
7 minutes ago, M.Yurizaki said:

If you're using HTML5 (and you probably should), you can try the video tag. There's a tutorial at https://www.w3schools.com/html/html5_video.asp

 

Only certain formats are supported depending on the browser, however.

I have used that tut, but cannot figure out how to put it in the background

Link to comment
https://linustechtips.com/topic/911640-how-to-do-this/#findComment-11194896
Share on other sites
Link to post
Share on other sites
Posted
1 minute ago, Neutrideo said:

Interesting, I am still looking for other options, I am able to use bootstrap and shiot

That's what the website you linked did. It put the video background before the content.

  

<main>
    <div class="video-background">
        <div class="video-foreground">
            <iframe id="video" src="https://www.youtube.com/embed/nNB_94VdOyk?controls=0&loop=1&showinfo=0&autoplay=1&rel=0&enablejsapi=1&origin=https://i.ryois.me&playlist=nNB_94VdOyk"
                frameborder="0" allowfullscreen></iframe>
        </div>
    </div>
    <div class="text" id="main">
        <div>
            <h1>Ryois</h1>
        </div>
    </div>
</main>

 

I have a blog! And a list of guides I've posted

Link to comment
https://linustechtips.com/topic/911640-how-to-do-this/#findComment-11194971
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×