how to turn a clip into a background-CodePudding

I were trying to make a clip background but turned out it didn't workout

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=>, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="asss.css" type="text/css">
</head>
<body>
<div >
  <img src="https://cdn.glitch.global/0bf6732a-451c-4def-8d7b-077baa2d08d7/technology.png?v=1659872481887" width="90px" height="60px">
  <h1>PHỤ NỮ</h1>
  <p>Nếu bạn đang đau đầu vì sao con ghệ, con vợ, con bồ bạn, con bạn gái bạn đang nhõng nhẽo, khó ở, chảng biết làm sao để thõa mãn trong đem " hooked up "
  </p>
  <p>Hãy đến với chúng tôi, Ltek sẽ mở lối con đường cho bạn trong cách chinh phục điểm hưng phấn của người đối phương
  </p>
  <div >
     <video autoplay loop muted  width="100%" height="100%">    
        <source src="https://cdn.glitch.global/0bf6732a-451c-4def-8d7b-077baa2d08d7/girl.mp4?v=1659872428561">
     </video>
  </div>
</div>
</body>
</html>

css

.container{
margin:0 0;
display:flex;
width:100%;
height:100vh;
align-items: center;
justify-content:center;
position:relative;
overflow:hidden;
 }
.video-container {
position:absolute;
width:100%; 
  }

https://airy-spotless-opinion.glitch.me https://glitch.com/edit/#!/airy-spotless-opinion Edit: I've just realized that the result appears on glitch is slightly different from my own vscode The result on my pc1

html on my pc

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=>, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="asss.css" type="text/css">
</head>
<body>
<div >
 <img src="technology.png" width="90px" height="60px">
 <h1>PHỤ NỮ</h1>
 <P>Nếu bạn đang đau đầu vì sao con ghệ, con vợ, con bồ bạn, con bạn gái bạn đang nhõng nhẽo, khó ở, chảng biết làm sao để thõa mãn trong đem " hooked up "
 </P>
 <p>Hãy đến với chúng tôi, Ltek sẽ mở lối con đường cho bạn trong cách chinh phục điểm hưng phấn của người đối phương</p>
 <div >
  <video autoplay loop muted  width="100%" height="100%">    
   <source src="girl.mp4"></source>
   </video>
 </div>
</div>
</body>
</html>

css on my pc

.container{
margin:0 0;
display:flex;
width:100%;
height:100vh;
align-items: center;
justify-content:center;
position:relative;
overflow:hidden;}
.video-container {
 position:absolute;
 width:100%;
 }

The icon i used 2

CodePudding user response：

try this

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial;
    font-size: 17px;
}

#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
}

.content {
    position: fixed;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 100%;
    padding: 20px;
}

#myBtn {
    width: 200px;
    font-size: 18px;
    padding: 10px;
    border: none;
    background: #000;
    color: #fff;
    cursor: pointer;
}

#myBtn:hover {
    background: #ddd;
    color: black;
}
</style>
</head>
<body>

<video autoplay muted loop id="myVideo">
  <source src="rain.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

<div >
  <h1>Heading</h1>
  <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro.</p>
  
</div>



</body>
</html>