[JavaScript] 익스플로러 유튜브 로딩 문제 해결

 

익스플로러에서 iframe이나 object로 유튜브를 삽입하면 타 브라우저에 비해서 로딩 속도가 매우 느린 현상이 있다.

이미 이 자체만으로도 심각한 문제지만, 사이트에 페이드 등 일부 효과들이 렉을 동반한 버벅임으로 정상 실행되지 않는 것도 문제다.

 

 

크롬은 지연 로딩을 지원하고 있다.

 

<iframe src="https://www.youtube.com/embed/vIcFnNdHc2w" width="700" height="450" loading="lazy" frameborder="0"></iframe>

 

이치럼 loading="lazy" 를 추가해주면 페이지를 로드할 때 유튜브를 읽지 않고 스크롤이 됐을 때 유튜브를 로드하여 페이지 로딩 시간을 단축시키고 렉도 줄인다.

 

 

지연로딩 사용 안함

지연로딩 사용

 

 

하지만 아쉽게도 익스플로러는 지연로딩 기능이 없다.

지연로딩도 없지만 로딩 속도가 비정상적으로 느리다.

이 문제를 해결하기 위해서 익스플로러에서 페이지 로드시 유튜브를 읽지 않고 썸네일만 불러들인 다음, 썸네일을 클릭하면 유튜브 영상이 시작되도록 하는 방식을 사용했다.

 

See the Pen 익스플로러 유튜브 로딩 문제 해결 by lpla (@lpla) on CodePen.

 

자바스크립트로 해당 유튜브 영상의 최대 해상도 썸네일을 cover클래스로 불러온다.

그리고 유튜브 버튼 모양의 아이콘을 정가운데 배치하고 css로 정렬, 호버 효과를 준다.

마지막으로 이미지를 클릭했을 때 기존 요소들 위치에 iframe으로 유튜브 영상을 가져온다.

 

즉 위쪽에 보이는 유튜브 영상은 실제 영상이 아니라 썸네일과 유튜브 아이콘을 이용한 눈속임이고 클릭하는 순간 영상을 불러온다.