[javascript] PIP기능을 구현해보자!(쉬움주의)

유튜브 등 영상 스트리밍 페이지에서 볼 수 있는 PIP기능!!

PIP는 Picture In Picture으로 브라우저에서 독립된 GUI 화면 위에 또 다른 화면을 제공하는 기능입니다!!

저는... 뭔가 거창하게 JS로 엄청 뚝딱뚝딱 해야할거 같아서 살짝 겁먹었는데요!

생각보다 매애애애애애애우 간단하더라구요!

 

재생되고 있는 플레이를 스크롤에 따라 position 값을 달리해주기만 하면 구현 완료!

 

<div class="player-wrap">
    <div class="player-box">
        <div class="player"></div>
    </div><!-- //.player-box -->
</div>

.player-wrap{position:relatvie;aspect-ratio:16/9;overflow:hidden;}
.player-box{position:relative;width:100%;}
.player-box.pip{position:fixed;aspect-ratio:16/9;width:400px;bottom:30px;right:30px;z-index:100;}

HTML과 CSS 이렇게 작성을 해주고~

스크롤이 원하는 위치에 왔을 때 addClass('pip'), removeClass('pip')를 해주면 됩니다.

쏘 씸풀!!!! :)

 

단, 주의해야할 것은 최상위 요소 .player-wrap이 height를 가지고 있어야 한다는 것 입니다.

그래야 자식요소인 .player-box를 fixed로 고정해도 레이아웃에 영향이 없기 때문입니다.

height를 각각 주기 번거로우니  aspect-ratio를 사용하는것도 간편한 해결 방법 이겠네요 ㅎㅎ

 

그럼 글 읽어주셔서 감사합니다.