HTML <Iframe> The inline Frame element

description : HTML <Iframe> The inline Frame element
author : 오션
email : shlim@repia.com
lastupdate : 2021-06-16 Wed

The source of the article

Ref

Browsing context
브라우징 컨텍스트는 브라우저가 문서를 표시하는 환경입니다. 최신 브라우저에서 브라우징 컨텍스트는 일반적으로 탭(a tab)이지만,
윈도우(window) 또는 프레임 즉, iframe과 같이 페이지의 일부분일 수도 있습니다.

각 브라우징 컨텍스트에는 특정 출처, 활성 문서의 출처 및 표시된 모든 문서를 기억하는 이력(history)이 순서대로 있습니다.

브라우징 컨텍스트 간의 통신은 심각하게 제한됩니다. 동일한 출처의 브라우징 컨텍스트 사이에서 BroadcastChannel을 열고 사용할 수 있습니다.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        iframe {
            border-right: 1px solid crimson;
            width: 100%;
        }
        .output {
            background: lightblue;
        }
    </style>
</head>
<body>
 
    <!-- fullscreen -->
    <!--
    <iframe id="inlineFrameExample" 
            title="Inline Frame Example" 
            width = '1300' 
            height = "1300" 
            src="https://www.openstreetmap.org/export/embed.html?
            bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&
            layer=mapnik" allowfullscreen>
    </iframe> -->
 
    <iframe id="inlineFrameExample" 
            title="Inline Frame Example" 
            width = '300' 
            height = "200" 
            src="https://www.openstreetmap.org/export/embed.html 
            bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
    </iframe>
</body>
</html>

포함된 각 브라우징 컨텍스트에는 고유한 세션 기록과 문서가 있습니다. 다른 브라우징 컨텍스트들을 포함하는 브라우징 컨텍스트를
상위(부모) 브라우징 컨텍스트 이라고 합니다. 부모가 없는 컨텍스트인 최상위 브라우징 컨텍스트는 일반적으로 Window 객체로 표시되는 브라우저 윈도우 입니다.

각 브라우징 컨텍스트는 완전한 문서 환경이므로 페이지의 모든 <iframe>에는 증가된 메모리 및 기타 컴퓨팅 리소스가 필요합니다.
이론적으로는 원하는 만큼 <iframe>을 사용할 수 있지만 성능 문제를 확인하십시오.

아이프레임(iframe)과 활용

아이프레임(iframe)과 활용 by 리베햐얀

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        iframe {
            width: 100%;
            height: 800px;
        }
    </style>
</head>
<body>
    <a href="https://www.youtube.com/" target="site">11번가 바로가기</a>
    <br><br><br>
    <iframe src="http://dbcut.com" name="site" frameborder="0"></iframe>
    <!-- a 링크와 iframe의 name값을 동일하게 하여  11번가 바로가기를 클릭하면 iframe 안에 11번가 사이트가 나타난다. 
        하지만 iframe을 금지하는 사이트가 많아 작동하지 않음 -->
    <!-- Refused to display 'https://11st.co.kr/' in a frame because it set 'X-Frame-Options' to 'deny'. -->
 
</body>
</html>

iframe 유튜브 비디오 반응형 구현

iframe 유튜브 비디오 반응형 구현하는 2가지 방법 by Rock's Easyweb
<iframe>을 CSS와 script로 제어하는 방법

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 80%;
            margin: 0 auto;
        }
 
        .container iframe {
            width: 100%;
        }
        .responsive-box {
            padding:56.25% 0 0 0;
            position:relative;
        }
        .target {
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            border: 0;
        }
    </style>
</head>
<body>
    <h1>iframe responsive</h1>
    <hr>
    <main class="container">
        <h2>responsive youtube</h2>
 
        <hr>
        <h2>youtube</h2>
 
        <div class="responsive-box">
            <iframe class="target" src="https://www.youtube.com/embed/3LiztfE1X7E?controls=0" 
            title="YouTube video player" 
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <hr> 
 
        <h2>vimeo</h2>
        <div class="responsive-box">
            <iframe class="target" src="https://player.vimeo.com/video/319221461?title=0&byline=0&portrait=0" 
            allow="autoplay; fullscreen; picture-in-picture" 
            allowfullscreen></iframe>
        </div>
 
        <hr>
        <h2>vimeo - fitvids</h2>
        <div class="fitvids-wrap">
            <iframe src="https://player.vimeo.com/video/319221461?title=0&byline=0&portrait=0" width="640" height="360" 
            frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
        </div>
 
    </main>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" 
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="FitVids.js-master/jquery.fitvids.js"></script>
    <script>
        $(".fitvids-wrap").fitVids();  
    </script>
</body>
</html>

Inflearn CodingWorks

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframe 만들기</title>
    <style>
        /* Google Web Font */
        @import url('https://fonts.googleapis.com/css?family=Montserrat:300,400, 500&display=swap');
 
        body {
            font-family: 'Montserrat', sans-serif;
        }
        iframe {
            width: 600px;
            height: 400px;
            border: none;
        }
    </style>
</head>
<body>
 
    <iframe src="test.html" frameborder="0"></iframe>
 
    <iframe width="560" height="315" src="https://www.youtube.com/embed/ANMJYpGZ8z0" title="YouTube video player" 
    frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen></iframe>
 
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 
    <h1>Test Iframe HTML</h1>
    <a href="https://www.inflearn.com/"  target="_parent">인프런 홈페이지 바로가기</a>
    <!-- target 속성을 _paren로 설정하면 a링크 클릭 시 iframe을 벗어나 해당 브라우저 화면에서 전체 화면으로 표시된다.  -->
</body>
</html>

Ref

https://code.jquery.com/jQuery CDN - Latest Stable Versions

http://fitvidsjs.com/FitVids.js
FitVids.js - 사용법 숙지 필요

[[https://vimeo.com/ko/|vimeo]
Hint : 선택한 동영상 화면에서 종이비행기 아이콘(공유) 클릭 > 팝업 - 옵션 표시 - 반응형(Responsive) 또는 고정형(Fixed Size) 선택 - 임베드에서 코드 복사 및 사용 >

오션, HTML, iframe