๐จ๐ป๊ฐ๋ฐ/๐Front-End
[HTML] video ํ๊ทธ / ๋ฐฐ๊ฒฝ video / ๋ก๊ทธ์ธ ๋ฐฐ๊ฒฝ video / login background video
kimtongting ์
๋๋ค
2022. 1. 14. 12:55
์๋ก
๋ก๊ทธ์ธ ์ฐฝ์ ์ ๋๋๊ฒ ๊พธ๋ฏธ๊ณ ์ถ์ด ๋ฐฐ๊ฒฝ์ VIDEO๋ฅผ ๋ฃ๊ธฐ๋ก ํ๋ค.
์ด๋์ด ์ฑ์์ VIDEO ๋ฅผ ์ฌ์ฉํ ๊ฒฝ์ฐ, ์ ์ฒด์ ์ผ๋ก ์์ ๋ ๋ชจ์ต์ ๋ณด์ฌ์ค๋ค.
HTML & CSS
*HTML*
<body>
<video width="100%" height="auto" autoplay loop playsinline muted>
<source src="/resources/images/production.mp4" type="video/mp4">
๋์ฒด ํ
์คํธ ~~ ๋ธ๋ผ๋ธ๋ผ
</video>
<div class="cont">
<div class="form sign-in">
<div align="center">
<img src="/resources/images/logo.png" alt="logo" class="mb-5 mt-2">
<h4 class="text-white font-weight-normal">Welcome to <span class="font-weight-bold text-white">OOO System</span></h4>
<p class="text-muted">OOO์์คํ
์ ์ค์ ๊ฒ์ ํ์ํฉ๋๋ค. <br></p>
</div>
<div>
<label>
<span>์์ด๋</span>
<input type="text" id="id" class="log_id inputTransParent" placeholder='์์ด๋๋ฅผ ์
๋ ฅํ์ธ์.' />
</label>
<label>
<span>๋น๋ฐ๋ฒํธ</span>
<input type="password" class="log_pw inputTransParent" id="pw" placeholder="๋น๋ฐ๋ฒํธ๋ฅผ ์
๋ ฅํ์ธ์." onkeydown="enterCheck('.btn_login')"/>
</label>
<button type="button" id="signin-Button" class="submit" onclick="login()">๋ก๊ทธ์ธ</button>
</div>
</div>
</div>
</body>*CSS*
/*video*/
video {
-o-object-fit: cover;
object-fit: cover;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 0;
}
/*video*/
์์ฑ๋๋ชจ์ต
๋ง๋ฌด๋ฆฌ(๊ด๋ จ ๊ธ)
-------------๋ด์ฉ์ ๋ ฅ-----------
๋ฐ์ํ