[자바스크립트, CSS] 스크롤 밖으로 나가면 비디오 고정하기

스크롤을 내려보세요!

비디오가 화면에 보이지 않으면, 좌측 하단에 position:fixed인 상태로 고정해줍니다.

HTML에 첨부(embed)하는 비디오에 사용할 수 있는 스크립트입니다.

유튜브, 네이버 TV, 카카오 TV 등 꽤 많은 비디오 공유 사이트에서 퍼온 비디오에 정상적으로 작동합니다.

Iframe을 반응형으로 감싸는 스크립트(링크)가 있어야 작동합니다.

Github

Codepen

깃허브와 코드펜 모두 Iframe을 반응형으로 감싸는 스크립트와 함께 들어있습니다. 참고하셔서 잘 적용해주세요.

비디오가 하나뿐일 때만 작동하는 스크립트입니다.

이 스크립트가 작동하지 않았으면 하는 페이지엔 <div class="not-sticker"></div>을 넣으시면 스크립트가 작동하지 않습니다.

See the Pen Sticky Youtube Video by Marshall (@marshall-ku) on CodePen.

// 변수를 항상 a,b,c 이렇게 선언했는데, 이런 변수 선언에 불만을 품는 사람이 생각보다 많아 꽤 정성 들여 변수를 선언했습니다.

당연히 비디오 본래 비를 유지하며 고정됩니다.

비디오가 고정됐을 때 비디오 위에 나오는 X 버튼을 누르면 비디오의 고정이 해제되며, 페이지를 다시 로드하기 전까진 비디오가 다시 고정되지 않습니다.