JavaScript로 iframe을 전체 화면으로 설정하는 방법

JavaScript를 활용하면 버튼 클릭 한 번으로 iframe을 브라우저 화면 전체 크기로 확장할 수 있습니다. 핵심 원리는 CSS의 뷰포트 단위인 100vw(너비)와 100vh(높이)를 사용해 iframe이 화면 전체를 차지하도록 스타일을 정의한 뒤, JavaScript로 해당 클래스를 동적으로 적용하는 것입니다.

예제 코드

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-weight: 500;
        font-size: 18px;
        color: blueviolet;
    }
    .fullScreen {
        width: 100vw;
        height: 100vh;
    }
</style>
</head>
<body>
<h1>Setting full screen iframe</h1>
<iframe class="frame" src="https://www.wikipedia.com" width="300px" height="200px"
></iframe>
<button class="Btn" style="margin: 15px;">Fullscreen</button>
<h3>Click on the above button to make the iframe go fullscreen</h3>
<script>
    let BtnEle = document.querySelector(".Btn");
    let frameEle = document.querySelector(".frame");
    BtnEle.addEventListener("click", () => {
        frameEle.className = "fullScreen";
    });
</script>
</body>
</html>

코드 설명

위 예제의 동작 방식은 다음과 같습니다.

.fullScreen 클래스: width: 100vw;와 height: 100vh;를 지정하여 요소가 뷰포트(브라우저 창)의 가로·세로 전체를 차지하도록 합니다.
버튼 이벤트 등록: querySelector()로 버튼과 iframe 요소를 선택한 후, addEventListener("click", ...)로 클릭 이벤트를 연결합니다.
클래스 교체: 버튼을 클릭하면 iframe의 클래스를 fullScreen으로 변경하여 기존의 300×200px 크기가 화면 전체 크기로 바뀝니다.

실행 결과

페이지를 실행하면 위키피디아 페이지를 표시하는 300×200px 크기의 iframe과 'Fullscreen' 버튼이 나타납니다.

JavaScript로 iframe을 전체 화면으로 설정하는 방법

'Fullscreen' 버튼을 클릭하면 −

JavaScript로 iframe을 전체 화면으로 설정하는 방법

iframe이 즉시 화면 전체로 확장되어 위키피디아 페이지가 브라우저 창 전체에 표시됩니다. 이처럼 간단한 클래스 토글 방식만으로도 별도의 Fullscreen API 호출 없이 iframe을 전체 화면처럼 활용할 수 있습니다.