[javascript] iframe 컨텐츠의 높이에 맞게 높이 조정

dev-riverkim·2023년 10월 23일
0
<!DOCTYPE html>
<html lang="ko">
<meta name="viewport"
    content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">

<head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <iframe width="100%" height="315" src="https://www.youtube.com/embed/AgMptWkzRD4?si=SOaEOsHma3zhJjqW"
        title="YouTube video player" frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen id="myIframe"></iframe>


    <script>


        window.addEventListener('resize', () => {
            const screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            const screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            document.getElementById('myIframe').style.width = screenWidth + 'px';
            document.getElementById('myIframe').style.height = screenHeight + 'px';
        });

        window.dispatchEvent(new Event('resize'));


    </script>

</body>

</html>
profile
dev-riverkim

0개의 댓글