반응 형 iframe 만들기

144

"iFrame을 반응 형으로 만들 수 있습니까?"라는 제목 의이 stackoverflow 게시물 을 읽었 으며 댓글 / 응답 중 하나 가이 jfiddle로 연결되었습니다.

그러나 필자의 요구에 맞게 HTML과 CSS를 구현하려고 할 때 동일한 결과 / 성공을 얻지 못했습니다. 내 JS 바이올린을 만들었 으므로 어떻게 작동하지 않는지 보여줄 수 있습니다. 필자가 사용중인 iFrame 유형과 관련이 있다고 확신합니다 (예 : 제품 이미지도 반응이 있거나 무언가 필요할 수 있습니까?)

내 주요 관심사는 내 블로그 독자가 iPhone에서 내 블로그를 방문 할 때 모든 내용이 x 너비 (모든 내용의 100 %)에 있기를 원하지 않으며 iFrame이 오작동하고 유일한 요소라는 것입니다. 다른 모든 내용을 지나치십시오.

어쨌든, 왜 작동하지 않는지 아는 사람이 있습니까? 감사합니다.

다음은 MY JSFIDDLE의 HTML 및 CSS입니다 (링크를 클릭하지 않으려는 경우).

<div class="wrapper">
  <div class="h_iframe">
    <!-- a transparent image is preferable -->
    <img class="ratio" src="http://www.brightontheday.com/wp-content/uploads/2013/07/placeholder300.png" />
    <iframe frameborder='0' height='465px' width='470px' scrolling='no' src='http://currentlyobsessed.me/api/v1/get_widget?wid=30&blog=Brighton+The+Day&widgetid=38585'
      frameborder="0" allowfullscreen></iframe>
  </div>
</div>

다음은 동반 CSS입니다.

.wrapper {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: #ffffff;
}

.h_iframe {
  position: relative;
}

.h_iframe .ratio {
  display: block;
  width: 100%;
  height: auto;
}

.h_iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
css  iframe  responsive-design 
— 브라이튼
소스
6
iframe 자체 ( '상자')가 반응 할 수 있습니다. 그러나 iframe 내부의 모든 것은 별도의 페이지이므로 CSS 또는 JS의 도메인에는 없습니다.
— DA.
i-frame이 포함 된 페이지와 iframe이 가리키는 서버의 문서 간 통신에 easyXDM을 사용할 수 있습니다.
— john Smith
1
나는 순수한 CSS를 선호합니다 : stackoverflow.com/a/26194041/274502
— cregox

답변:

107

나는 당신에게 Incredible Singing Cat 솔루션을 제시합니다 =)

.wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

jsFiddle : http://jsfiddle.net/omarjuvera/8zkunqxy/2/
윈도우 바를 움직이면 iframe이 반응 적으로 크기 조정됩니다

또는 고유 비율 기법을 사용할 수도 있습니다. 이는 위의 동일한 솔루션 (토마토, 토마토)의 대체 옵션입니다.

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
} 

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  width: 100%;
  height: 100%;
}
— 오마르
소스
4
자세한 세부 사항에서이 기술을 설명하는이 문서 Seealso smashingmagazine.com/2014/02/...
— 토마스 TEMPELMANN
YouTube iframe에서만 작동합니다. 다음을 참조하십시오 : jsfiddle.net/1bd8qw76
— csandreas1
2
이 기술은 모든 iframe에서 작동합니다. 트릭은 iframe의 내용도 반응이 필요합니다. 여기에 더 많은 내용이 있습니다. benmarshall.me/responsive-iframes
— Ben Marshall
68

이 코드를 사용하여 반응 형으로 만들어보십시오

iframe, object, embed {
    max-width: 100%;
}
— 코너 쿠션 멀홀
소스
37
이 코드로 컨테이너의 높이를 조정하지 않았습니다.
— reggie
46

Dave Rupert / Chris Coyier에서 해결책을 찾았습니다. 그러나 스크롤을 사용할 수 있도록 만들고 싶었습니다.

// HTML

<div class="myIframe"> 
   <iframe> </iframe> 
</div>

// CSS

.myIframe {
     position: relative;
     padding-bottom: 65.25%;
     padding-top: 30px;
     height: 0;
     overflow: auto; 
     -webkit-overflow-scrolling:touch; //<<--- THIS IS THE KEY 
     border: solid black 1px;
} 
.myIframe iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
— 아비
소스
2
콘텐츠 패딩 하단이 콘텐츠 너비의 비율 인 경우 800x600은 75 %, 800x536은 % 67
— nerkn
1
이것은 sarafi 및 모든 장치에 대해 iframe을 스크롤하기위한 좋은 출발점입니다. 매우 슬프지만 ....
— klewis
이것은 5000px 이상의 길이이므로 iframe을 스크롤하는 데 필요한 것입니다. 다른 코드는 긴 iFrame이 아래 내용에 겹쳐 지도록 강제했습니다.
— penmas
16 : 9, 패딩 바닥은 56.25 %이어야한다
— 세르게이 스카이 라
17

이 사이트 http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php 에 언급 된이 트릭을 사용할 수 있습니다 .

매우 유용하고 이해하기 쉽습니다. 당신이 만드는 모든 것

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

다음은 데모를 위해 편집 한 js 바이올린 입니다.

— 프라 그네 쉬 차드 하리
소스
10

이 솔루션을 확인하십시오 ... 저에게 효과적입니다 >> https://jsfiddle.net/y49jpdns/

<html lang="en" class="no-js">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <style>
      html body {width: 100%;height: 100%;padding: 0px;margin: 0px;overflow: hidden;font-family: arial;font-size: 10px;color: #6e6e6e;background-color: #000;} #preview-frame {width: 100%;background-color: #fff;}</style>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script>
         var calcHeight = function() {
           $('#preview-frame').height($(window).height());
         }

         $(document).ready(function() {
           calcHeight();
         }); 

         $(window).resize(function() {
           calcHeight();
         }).load(function() {
           calcHeight();
         });
      </script>
   </head>
   <body>
      <iframe id="preview-frame" src="http://leowebguy.com/" name="preview-frame" frameborder="0" noresize="noresize">
      </iframe>
   </body>
</html>
— 레오 레온시오
소스
여기 저기에 잘못된 조각이 있었기 때문에 바이올린을 업데이트했습니다. 동일하지만 혼란스럽지 않고 동일하게 작동합니다. jsfiddle.net/6NSX3/263
— Techno.Shaman
iOS는 높이를 정확하게 계산하지 않으며 탐색 모음을 고려합니다. 또한 IOS의 Iframe은 스크롤 할 수 없습니다.
— Tine Koloini
6

DA가 옳다. 당신의 바이올린에서, iframe은 실제로 반응합니다. iframe 상자 크기를 확인하여 방화범에서이를 확인할 수 있습니다. 그러나 iframe 내부의 일부 요소는 반응이 없으므로 창 크기가 작을 때 "고착"됩니다. 예를 들어 div#products-post-wrapper의 너비는 8800 픽셀입니다.

— 필립 007
소스
5

iFrame은 고유 한 비율 기법 이라는 작은 CSS 기술로 종횡비를 유지하면서 완전히 반응 할 수 있습니다 . 이 질문을 구체적으로 다루는 블로그 게시물을 작성했습니다 : https://benmarshall.me/responsive-iframes/

이 요지는 :

.intrinsic-container {
  position: relative;
  height: 0;
  overflow: hidden;
}


/* 16x9 Aspect Ratio */

.intrinsic-container-16x9 {
  padding-bottom: 56.25%;
}


/* 4x3 Aspect Ratio */

.intrinsic-container-4x3 {
  padding-bottom: 75%;
}

.intrinsic-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class="intrinsic-container intrinsic-container-16x9">
  <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>
스 니펫 확장

붐, 완전 반응!

— 벤 마샬
소스
3

iframe이 반응 할 수 없습니다. 자체 설정된 높이와 너비를 가진 웹 페이지이므로 iframe 컨테이너를 반응 형으로 표시하지만 표시되는 컨텐츠는 만들 수 없습니다.

예제 바이올린 링크는 크기가 선언되지 않은 내장 YouTube 비디오 링크를 표시하기 때문에 작동합니다.

— MGDTech
소스
오해의 소지가 있습니다. YouTube iframe 너비와 높이가 지정된 경우 예제 바이올린 링크도 작동합니다.
— Philip007
14
나는 이것이 엄청나게 억눌린 것에 실망했다. 그가 전하는 메시지는 중요하다. 소스의 반응 속도에 따라 iFrame이 반응하기에 위험합니다. 예, 유튜브는 예외입니다. 그러나 그의 요점은 여전히 ​​유효합니다.
— MattWithoos
3

CSS로 간단하게 :

iframe{
width: 100%;
max-width: 800px /*this can be anything you wish, to show, as default size*/
}

참고 사항 : 그러나 내용이 반응하지는 않습니다!

두 번째 편집 : : 내부 내용에 따라 두 가지 유형의 반응 형 iframe이 있습니다.

Iframe에 내부에만 포함 된 경우 하나는 그 비디오 또는 이미지 또는 다수의 CSS 코드의 상기 두 행이 거의 충분되는 수직 위치를, 상기 종횡비가 의미가 ...

다른 하나는 다음과 같습니다.

접촉 / 등록 양식의 컨텐츠 유형 , 하지 가로 세로 비율은 우리가 계속해야 할, 그러나 나타나지 스크롤을 방지하기 위해, 이하 흐르는 컨테이너를 내용. 모바일에서는 스크롤 막대가 보이지 않고 (iframe의) 내용이 보일 때까지 스크롤하면됩니다. 물론 적어도 다음 height과 같은 미디어 쿼리를 사용하여 좁은 화면에서 발생하는 수직 공간에 콘텐츠 높이를 맞추기 위해 적어도 일종의을 제공합니다 .

@media (max-width: 640px){
iframe{
height: 1200px /*whatever you need, to make the scrollbar hide on testing, and the content of the iframe reveal (on mobile/phone or other target devices) */
}
}
@media (max-width: 420px){
iframe{
height: 1600px /*and so on until and as needed */
}
}
— 산도르 주 볼리
소스
1
이것은 간단하고 굉장하다
— vaishali kapadia
iframe의 크기가 조정될 때 가로 세로 비율이 유지되지 않습니다. 즉 너비가 무엇이든 높이가 동일하게 유지됩니다.
— ryan
@ ryan 내 대답을 업데이트했습니다. 나는 부분적으로 당신에게 동의합니다, btw.
— Sándor Zuboly 2018 년
2

leowebdev의 게시물이 내 끝에서 작동하는 것처럼 보였지만 스크롤하려는 사이트와 바닥 글의 두 가지 요소를 만들려고했습니다.

스크롤 scrolling="yes" 하면 iframe 포함 코드에 To 를 추가하여 돌아 왔습니다 .

반응 형으로 인해 바닥 글이 자동으로 녹아웃되는지 확실하지 않지만 다른 사람이 그 대답을 알고 있기를 바랍니다.

— 크리스 크나 벤휴
소스
2

픽셀로 지정된 iframe 높이와 너비를 제거하고 백분율을 사용하십시오.

iframe{  max-width: 100%;}
— 제 스틴
소스
1
그러나 내부 콘텐츠를 반응 적으로 만들지는 않았습니다.
— Vir
1 
<div class="wrap>
    <iframe src="../path"></iframe>
</div>

.wrap { 
    overflow: auto;
}

iframe, object, embed {
    min-height: 100%;
    min-width: 100%;
    overflow: auto;
}
— 사란
소스
1
시작하기

브라우저 보안 제약으로 인해 "부모"페이지와 iframe ( "자식")을 통해 포함 된 페이지 모두에 Javascript 파일을 포함해야합니다.

현재 버전에서 상위 페이지에는 최신 버전의 jQuery가 포함되어야합니다. 하위 페이지 기능에 대한 jQuery에 대한 종속성이 없습니다. 이후 버전에서는 부모에 대한 jQuery에 대한 종속성도 제거하려고합니다.

참고 : makeResponsive () 함수 호출의 "xdomain"매개 변수는 선택 사항입니다.

코드 샘플 <!-- Activate responsiveness in the "child" page --><script src="/js/jquery.responsiveiframe.js"></script><script> var ri = responsiveIframe(); ri.allowResponsiveEmbedding();</script> <!-- Corresponding code in the "parent" page --><script src="/js/jquery.js"></script><script src="/js/jquery.responsiveiframe.js"></script><script> ;(function($){ $(function(){ $('#myIframeID').responsiveIframe({ xdomain: '*'}); }); })(jQuery);</script>
— 아메드 엘체 이크
소스
0

다음 마크 업으로 :

<div class="video"><iframe src="https://www.youtube.com/embed/StTqXEQ2l-Y"></iframe></div>

다음 CSS는 비디오를 전체 너비와 16 : 9로 만듭니다.

.video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
}

.video > .video__iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
  }
}
— 도리스 사람
소스
0

나는이 주제에 대해 더 많이 검색하고 마침내 좋은 대답을 얻습니다. 당신은 같은 시도 할 수 있습니다 이 :

.wrapper {
width: 50%;
}
.container {
height: 0;
width: 100%;
padding-bottom: 50%;
overflow: hidden;
position: relative;
}
.container iframe {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
<div class="wrapper">
  <div class="container">
    <iframe src="there is path of your iframe"></iframe>
   </div>
</div>
스 니펫 확장

— 명예
소스
0

"iframe"을 반응 형으로 만들고 모든 장치 화면에 적합하게 만드는 가장 좋은 솔루션은이 코드를 적용하면됩니다 (게임 사이트에서 훌륭하게 작동). 

iframe::-webkit-scrollbar{display:none}
.iframe{background:#fff;overflow:hidden}
.iframe iframe{width:100%;height:540px;border:0;display:block}
.iframe-content{position:absolute;width:100%;height:540px;overflow:auto;top:0;bottom:0;-webkit-overflow-scrolling:touch}

@media screen and (max-width:992px){.iframe iframe{height:720px}}
@media screen and (max-width:768px){.iframe iframe{height:720px}}
@media screen and (max-width:720px){.iframe iframe{height:720px}}
@media screen and (max-width:479px){.iframe iframe{height:480px}}
@media screen and (max-height:400px){.iframe iframe{height:360px}}

모든 장치에 적합한 반응 형 게임 컨테이너를 찾고 있다면 고급 CSS @media 쿼리를 사용하는이 코드를 적용하십시오.

— 미조 게임
소스
안녕하세요, Iframe html 코드는 간단합니다 :
— Mizo Games
<div class = "iframe"> <iframe src = ""> </ iframe> </ div>
— Mizo Games
실제로 나는 그것을 내 웹 사이트 : Al3abMizo Games와 함께 사용하며, 화면 크기에 관계없이 모든 장치에서 게임을함으로써 그것을 시도 할 수 있습니다.
— Mizo Games
0

종횡비를 알 수없고 iFrame의 내용이 완전히 반응하는 상황에서 완전 반응 형 iFrame.

위의 솔루션 중 어느 것도 내 필요에 맞지 않았으며, 그 안에 완전히 반응하는 동적 콘텐츠를 가진 완전히 반응하는 iFrame을 만드는 것이 었습니다. 모든 종횡비를 유지하는 것은 옵션이 아닙니다.

  1. 탐색 막대의 높이와 iFrame 위 또는 아래의 컨텐츠를 가져옵니다. 필자의 경우 상단 탐색 표시 줄만 빼면 iFrame이 화면 하단까지 채워지기를 원했습니다.

암호: 

function getWindowHeight() {
        console.log('Get Window Height Called')
        var currentWindowHeight = $(window).height()

        var iFrame = document.getElementById("myframe")
        var frameHeight = currentWindowHeight - 95

        iFrame.height = frameHeight; 

    }
//Timeout to prevent function from repeatedly firing
    var doit;
    window.onresize = function(){
      clearTimeout(doit);
      doit = setTimeout(resizedw, 100);
    };

또한 크기를 조정할 때 함수가 백만 번 호출되지 않도록 시간 초과를 만들었습니다.

— JPeG
소스
0 
For Example :

<div class="intrinsic-container">
  <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>

CSS 

.intrinsic-container {
  position: relative;
  height: 0;
  overflow: hidden;
}

/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
  padding-bottom: 56.25%;
}

/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
  padding-bottom: 75%;
}

.intrinsic-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}
— KTrivedi
소스
0

이 전체 코드를 확인하십시오. 아래 코드와 같이 컨테이너를 백분율로 사용할 수 있습니다.

<html>
<head>
<title>How to make Iframe Responsive</title>
<style>
html,body        {height:100%;}
.wrapper         {width:80%;height:100%;margin:0 auto;background:#CCC}
.h_iframe        {position:relative;}
.h_iframe .ratio {display:block;width:100%;height:auto;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
</style>
</head>
<body>
<div class="wrapper">
<div class="h_iframe">
<img class="ratio" src=""/>
<iframe src="http://www.sanwebcorner.com" frameborder="0" allowfullscreen></iframe>
</div>
<p>Please scale the "result" window to notice the effect.</p>
</div>
</body>
</html>

이 데모 페이지를 확인하십시오 .

— 락
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.