반응 형 iframe 만들기

lottoking 2020. 6. 29. 07:37

반응 형 iframe 만들기

"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%;
}

나는 당신에게 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%;
}

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

iframe, object, embed {
    max-width: 100%;
}

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%;
}

이 사이트 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 바이올린 입니다.

iframe{
  max-width: 100% !important;
}

이 솔루션을 확인하십시오 ... 저에게 효과적입니다 >> 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>

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

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>

붐, 완전 반응!

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

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

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

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

iframe{  max-width: 100%;}

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 */
}
}

<div class="wrap>
    <iframe src="../path"></iframe>
</div>

.wrap { 
    overflow: auto;
}

iframe, object, embed {
    min-height: 100%;
    min-width: 100%;
    overflow: auto;
}

@Connor Cushion Mulhall의 코드를 조정하여 나를 해결했습니다.

iframe, object, embed {
  width: 100%;
  display: block !important;
}

다음 마크 업으로 :

<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;
  }
}

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

.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>

"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 ( "자식")을 통해 포함 된 페이지 모두에 Javascript 파일을 포함해야합니다.

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

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

코드 샘플  <script src="/js/jquery.responsiveiframe.js"></script> <script> var ri = responsiveIframe(); ri.allowResponsiveEmbedding(); </script>  <script src="/js/jquery.js"></script> <script src="/js/jquery.responsiveiframe.js"></script> <script> ;(function($){ $(function(){ $('#myIframeID').responsiveIframe({ xdomain: '*'}); }); })(jQuery); </script>

Fully responsive iFrame for situations where aspect ratio is unknown and content in the iFrame is fully responsive.

None of the above solutions worked for my need, which was to create a fully responsive iFrame that had fully responsive dynamic content inside of it. Maintaining any kind of aspect ratio was not an option.

Get height of your navigation bar and any content ABOVE or BELOW the iFrame. In my case I only needed to subtract the top navbar and I wanted the iFrame to fill all the way down to the bottom of the screen.

Code:

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);
    };

I also created a timeout so that on resize the function wouldn't get called a million times.

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%;
}

Check out this full code. you can use the containers in percentages like below code:

<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>

Check out this demo Page.

iframes cannot be responsive. You can make the iframe container responsive but not the content it is displaying since it is a webpage that has its own set height and width.

The example fiddle link works because it's displaying an embedded youtube video link that does not have a size declared.

This solution worked for me. And I found it easier. https://jameshfisher.com/2017/08/30/how-do-i-make-a-full-width-iframe/

참고URL : https://stackoverflow.com/questions/17838607/making-an-iframe-responsive

'IT' 카테고리의 다른 글

넓은 형식에서 긴 형식으로 data.frame 재구성 (0)	2020.06.29
자식 태그를 다시 만든 후 "태그가 이미 원격에 존재합니다"오류 (0)	2020.06.29
Python에서는 argparse를 사용하여 양의 정수만 허용하십시오. (0)	2020.06.29
데이터 세트에 커스텀 객체를 저장하는 방법? (0)	2020.06.29
ggplot2 라인 플롯에 범례 추가 (0)	2020.06.29

현재글반응 형 iframe 만들기

내가 바로 로또왕!

DVD순위, Java, 무비순위, 공연, spring3, 놀거리, 자바, C#, c++, 연극, 뮤지컬, 볼거리, jquery, 축제, spring, 행사, 관광, 여행, javascript, 영화순위,

Today :
Yesterday :

lottoking