[CSS] 유튜브 전체화면을 웹에서 구현하려면?

유튜브 전체화면을 웹에서 구현하려면?

웹 애플리케이션 또는 웹 사이트를 개발할 때 종종 전체화면 모드를 구현해야 할 때가 있습니다.

유저가 내용에 더 집중할 수 있도록 하거나 더 큰 화면에서 작업할 수 있도록 하기 위해 전체화면 기능은 매우 유용합니다.

이번 글에서는 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;
    }
  }