로딩 창(Loading) & 동영상
: 로딩 창 및 동영상 삽입 구현
사용 언어
- HTML
- Javascript
- CSS
구조
- index.html: 전체 구조
- index.js: 로딩 페이지, 동영상 삽입
- main.css: 디자인
코드
구현 계획 & 기능 구현
- 로딩 gif와 동영상 준비
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;
}배운 것
<iframe> : 유튜브 동영상을 첨부할 때 사용하는 태그
src: 삽입할 홈페이지 좌표name: 프레임 이름width: 프레임 가로 너비height: 프레임 세로 길이mute=1: 뮤트autoplay=1: 자동재생loop=1: 반복
(루프 기능을 사용하기 위해서는playlist값을 설정)
<iframe width="560" height="315"
src="https://www.youtube.com/embed/kamsx_g2hnI?loop=1&autoplay=1&mute=1&playlist=kamsx_g2hnI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>해결한 점
- 로고 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
비전공자 개발 일기