✔ 웹페이지에 영상을 가져오는 일반적인 방법은 총 세가지다.
1. 직접 영상을 업로드하는 법
2. iframe으로 설정하는 법
<iframe>: 인라인 프레임 요소 - HTML: Hypertext Markup Language | MDN (mozilla.org)
3. youtube 영상 코드로 설정하는 법
iframe 삽입에 대한 YouTube Player API 참조 문서 | YouTube IFrame Player API (google.com)
✔ 일단 내가 선택한 방법은 1번이다.
2번 iframe은 브라우저에 따라 지원 상태가 다른 것 같은데 불안정해서 선택하지 않았고
3번 youtube 영상은 js 코드가 길어지고 홈 화면의 하위 레이어에 영상이 재생되는데
커서가 올라가면 control 화면이 계속 뜨기 때문에 미관 상 사용하지 않았다.
✔ video 태그를 사용했는데
src // autoplay // muted // playsinline // loop 를 사용하여
화면을 켰을 때 자동으로 실행되게
소리는 들리지 않게
control 화면은 뜨지 않게
무한반복 재생되게 설정하였다.
✔ 현재 오류
홈화면 문구를 이루는 div 태그와 video 태그 id = container인 div 태그에 같은 자식으로 들어가있다.
video 태그 자체는 문제가 없지만 이 둘의 위치 관계가 position으로 설정하는데 계속 홈화면 문구가 최하단에 고정되어 있어서 해결 방법을 찾고 있다. 아직 position의 개념을 확실하게 이해한 것 같지 않다. 이 개념을 이해하고 문제를 해결해서 정리한 글을 올려야겠다.