CSS
[CSS] 유튜브 전체화면을 웹에서 구현하려면?
dev_sihyun
2024. 2. 1. 17:40
반응형
유튜브 전체화면을 웹에서 구현하려면?
웹 애플리케이션 또는 웹 사이트를 개발할 때 종종 전체화면 모드를 구현해야 할 때가 있습니다.
유저가 내용에 더 집중할 수 있도록 하거나 더 큰 화면에서 작업할 수 있도록 하기 위해 전체화면 기능은 매우 유용합니다.
이번 글에서는 JavaScript와 CSS를 사용하여 간단한 방법으로 전체화면 설정 기능을 구현하는 방법을 살펴보겠습니다. 😁
#1 전체화면 css 방식
전체화면 기능을 구현하기 위해서는 HTML, JavaScript 그리고 CSS에 대한 이해가 일부 필요합니다.
이 글에서는 JavaScript를 이용해 전체화면 모드를 토글하는 방법에 대해서 다루겠습니다.
#2 JavaScript 코드 및 해석
아래 JavaScript 코드는 전체화면 모드를 활성/비활성하는데 사용되며, 전체화면 모드를 토글로 관리할 수 있는 기능을 가진 버튼 컴포넌트입니다.
import React from "react";
import FullBtnImg from "/../Image/builder-full-btn.svg"
export default FullScreenButton() {
const handleClickFullScreen = event => {
let element = document.body;
if (event instanceof HTMLElement) {
element = event;
}
let isFullscreen =
document.webkitIsFullScreen || document.mozFullScreen || false;
element.requestFullScreen =
element.requestFullScreen ||
element.webkitRequestFullScreen ||
element.mozRequestFullScreen ||
function() {
return false;
};
document.cancelFullScreen =
document.cancelFullScreen ||
document.webkitCancelFullScreen ||
document.mozCancelFullScreen ||
function() {
return false;
};
isFullscreen ? document.cancelFullScreen() : element.requestFullScreen();
};
return (
<div className="FullScreenButtonStyle">
<img onClick={handleClickFullScreen} src={FullBtnImg} alt="fullscreen button"/>
</div>
);
}
1. handleClickFullScreen : 전체화면 모드를 토글하는데 사용되는 함수
- 함수는 event를 매개변수로 받아들이며, event의 타겟이 될 element를 결정 (default는 document.body)
2. isFullScreen : 전체화면 상태를 확인하기 위한 변수
3. requestFullScreen, cancelFullScreen : 브라우저의 호환성을 고려하여 정의된 함수
- 현재 전체화면 상태에 따라(isFullScreen으로 식별) requestFullScreen() 혹은 cancelFullScreen() 함수가 호출됨
#3 CSS
버튼의 CSS이며 예시이며, 화면에 따라 적절한 CSS가 필요합니다!
.FullScreenButtonStyle {
position: fixed;
z-index: 1;
right: 28px;
bottom: 20px;
img {
cursor: pointer;
display: block;
width: 43px;
height: 43px;
}
}
반응형