[HTML] video 태그 / 배경 video / 로그인 배경 video / login background video

서론

로그인 창을 정돈되게 꾸미고 싶어 배경에 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*/

완성된모습

마무리(관련 글)

-------------내용입력-----------

저작자표시 비영리 동일조건

서론

HTML & CSS

*CSS*

완성된모습

마무리(관련 글)

검색 태그

티스토리툴바

CSS