how to turn a clip into a background

user_19616577 0
Viewed 35

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 class="container">
  <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 class="video-container">
     <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 class="container">
 <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 class="video-container">
  <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

css html
1 Answers

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 class="content">
  <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>
user_197051590
Related