위치·크기·이동 영역
플로팅 플레이어의 크기 배율, 화면 안 노출 위치, 드래그로 움직일 수 있는 범위를 지정하는 세 옵션을 다룹니다.
세 옵션
모두 setFloatingType 의 인자입니다.
| 옵션 | 정하는 것 | 기본값 |
|---|---|---|
size | 크기 배율 | 0.25 |
floatingPosition | 화면 안 노출 위치 | bottom right, 여백 20px |
restrictionArea | 드래그로 움직일 수 있는 범위 | 화면 전체 |
javascript
window.SauceClipPlayerLib.setFloatingType({ type: 'basic', size: 0.3, floatingPosition: { position: 'bottom left', offsetX: 12 }, restrictionArea: { elementId: 'content' } })
크기
size 는 원래 크기에 대한 배율입니다. 세로 비율은 9:16으로 고정이라 가로만 따로 정할 수는 없습니다.
| 값 | 결과 |
|---|---|
0.25 | 기본값 |
0.3 | 기본보다 조금 큼 |
1 | 원래 크기 |
노출 위치
position 은 세로와 가로를 공백으로 구분한 문자열입니다. 네 모서리 중 하나를 고릅니다.
| 값 | 위치 |
|---|---|
'bottom right' | 오른쪽 아래 (기본값) |
'bottom left' | 왼쪽 아래 |
'top right' | 오른쪽 위 |
'top left' | 왼쪽 위 |
📍 네 모서리 모두 화면 가장자리에서 20px 떨어집니다.
offsetX · offsetY 값은 이 여백에 더해집니다.
⚠️
position 에 top · bottom · left · right 외의 값을 넣으면 그 방향의 위치가 지정되지 않아 플레이어가 의도한 모서리에 붙지 않습니다.
이동 영역
시청자는 플로팅 플레이어를 드래그해 옮길 수 있습니다. restrictionArea 로 그 범위를 특정 요소 안으로 제한합니다.
| 파라미터 | 설명 |
|---|---|
element | 범위가 될 요소를 직접 넘김. elementId 보다 우선 |
elementId | 범위가 될 요소의 ID |
javascript
window.SauceClipPlayerLib.setFloatingType({ type: 'basic', restrictionArea: { element: document.getElementById('content') } })
📌 지정한 ID의 요소를 찾지 못하면 범위 제한 없이 화면 전체에서 움직입니다.
가장자리 붙기
드래그를 놓은 지점이 화면 가장자리에서 100px 안이면 플레이어가 그 가장자리에 붙습니다. 범위를 제한한 경우에도 같습니다.
Updated about 4 hours ago
Did this page help you?