연구실 홈페이지 유튜브 동영상 랜덤재생 등 업데이트 사항 정리

오늘 연구실 홈페이지 첫 화면 수정했습니다. 실제 반영은 학교 서버 파일 교체 이후 가능합니다. 며칠 걸릴 수 있습니다.

수정사항에 대한 주요 내용 요약입니다. 

 

 

홈페이지에 YouTube 랜덤 재생 기능 추가하기

 

 

1. YouTube Data API v3 키 발급

Google Cloud Console에서 API 키 발급

• console.cloud.google.com 접속 → 새 프로젝트 생성
• API 및 서비스 → 라이브러리 → YouTube Data API v3 활성화
• 사용자 인증 정보 → API 키 생성
• 보안을 위해 HTTP 리퍼러를 운영 도메인으로 제한 권장

 

2. 랜덤 재생 원리

YouTube Data API v3를 두 단계로 호출

• 1단계: 채널 ID로 업로드 재생목록 ID 조회
• 2단계: 재생목록에서 동영상 목록 가져오기 (최대 50개)
• 목록에서 랜덤 인덱스 선택 후 iframe에 삽입

이전/다음/랜덤 버튼은 currentVideoIndex를 관리하여 구현

 

3. 로컬 테스트 환경

로컬 파일(file:///)에서는 API가 작동하지 않음

• API 키의 HTTP 리퍼러 제한
• 브라우저 CORS 보안 정책

해결책: VS Code의 Live Server 확장(Ritwick Dey)을 설치하거나, 터미널에서 python -m http.server 8000 실행 후 http://localhost:8000으로 접속.

Live Server 사용 시 폴더 단위로 열어야 정상 작동(File → Open Folder).

 

4. 카로젤 단체사진 랜덤 표시

JavaScript 배열에 이미지 파일명을 등록해서 페이지 로드 시 랜덤으로 한 장 표시

 

javascript

const eaclImages = [
  "image/EACL 2019.jpg",
  "image/EACL 2022.jpg",
  "image/EACL 2026a.jpg",
  "image/EACL 2026b.jpg"
];
const pick = eaclImages[Math.floor(Math.random() * eaclImages.length)];
document.getElementById("eacl-random-img").src = pick;