로딩 창(Loading) & 동영상
: 로딩 창 및 동영상 삽입 구현
사용 언어
- HTML
- CSS
- Javascript
구조
- index.html - 전체 구조
- index.js - 기능 구현
- main.css - 전체 디자인
코드
구현 계획
1. 로딩 gif와 동영상 준비
2. setTimeout() 함수를 통해 로딩 페이지에서 5초 뒤 동영상 페이지로 전환하기
- 로딩 페이지는 display: none
- 동영상 페이지는 display: flex
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap');
</style>
<title>Loading</title>
</head>
<body>
<!-- 로딩 페이지 -->
<div id="loading">
<img src="Walk.gif" alt="My image">
<p id="loadingtitle">Loading...</p>
</div>
<!-- 동영상 페이지 -->
<div id="video" style="display: none;">
<p id="title">Someday or One Day</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/eHPxNwEWHpg?loop=1&autoplay=1&mute=1si=UYsNbT9Hi6Mqt6B0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<script src="index.js"></script>
</body>
</html>
index.js
setTimeout(() => {
document.getElementById('loading').style.display = 'none';
document.getElementById('video').style.display = 'flex';
}, 5000);
main.css
#loading, #video {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
#title {
font-family: "Nanum Myeongjo", serif;
font-size: 20px;
font-weight: 500;
margin-bottom: 35px;
}
잘한 점
- 로고 gif가 링크로는 재생되지 않아서 결국 gif 파일로 다운 받아서 사용했다.
이미지를 사용할 때는 해당 이미지가 코드 파일 안에 존재해야 한다는 것을 잊고 있어서 꽤 애를 먹었으나 성공적으로 로딩 이미지를 바꿀 수 있었다.
아쉬운 점
- 로딩 후 동영상 바로 재생이 안된다.
동영상 scr에 playlist id를 써야하는 것 같은데 영상 id가 뭔지 모르겠다...
여러 블로그를 참고했지만 끝내 안돼서 바로 재생 기능은 구현하지 못했다.
- 원하는 영상을 삽입하지 못했다.
원래 공식 노래 영상을 넣고 싶었는데 유튜브를 재생할 수 없다는 문구만 뜨고 재생이 안돼서 재생이 되는 영상으로 다시 넣었다.
저작권 문제인 것 같아서 아쉽다.
깃허브
https://github.com/kwonboryong/toyProjects/tree/main/loading%26video
출처
https://codepen.io/Beluga-CAT-meow/pen/yLwWrEB
https://jong99.tistory.com/m/36