Bir iframe'i duyarlı hale getirme

144

"Bir iFrame'e yanıt verebilir misiniz?" Başlıklı bu stackoverflow yayınını okuyordum ve yorumlardan / cevaplardan biri beni bu jfiddle'a götürdü.

Ancak HTML ve CSS'yi ihtiyaçlarıma göre uygulamaya çalıştığımda, aynı sonuçlara / başarıya sahip değildim. Kendi JS kemanımı oluşturdum, böylece benim için aynı şekilde nasıl çalışmadığını gösterebilirim. Eminim kullandığım iFrame türüyle bir ilgisi var (örneğin, ürün resimlerinin de duyarlı olması gerekebilir mi?)

Benim asıl endişem, blog okuyucularımın blog'larını iPhone'larında ziyaret ettiklerinde, her şeyin x genişliğinde (tüm içeriğim için% 100) olmasını istemiyorum ve sonra iFrame yanlış davranıyor ve daha geniş olan tek öğe (ve dolayısıyla çubuklar) diğer tüm içeriği geçmiş - bu mantıklı ise ??)

Her neyse, neden çalışmadığını bilen var mı? teşekkür ederim.

İşte benim JSFIDDLE HTML ve CSS (bağlantıyı tıklamak istemiyorsanız):

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

ve işte beraberindeki 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 
— Brighton
kaynak
6
İframe'in kendisi ('kutu') duyarlı olabilir. Ancak iframe içindeki her şey ayrı bir sayfadır ve bu nedenle CSS veya JS alan adınızda değildir.
— DA.
i-frame'in katıştırıldığı sayfa ile iframe'in işaret ettiği sunucudaki belge arasındaki iletişim için easyXDM'yi kullanabilirsiniz.
— john Smith
1
Saf
— css'i

Yanıtlar:

107

Sana İnanılmaz Şarkı söyleyen Kedi çözümünü sunuyorum =)

.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/
Pencere çubuğunu hareket ettirdikçe, duyarlı bir şekilde yeniden boyutlandırmak için iframe'i göreceksiniz

Alternatif olarak, içsel oran tekniğini de kullanabilirsiniz - Bu, yukarıdaki aynı çözeltinin alternatif bir seçeneğidir (domates, domates)

.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%;
}
— Ömer
kaynak
4
Bu tekniği daha ayrıntılı olarak açıklayan bu makaleye bakınız: smashingmagazine.com/2014/02/…
— Thomas Tempelmann
yalnızca youtube iframe'leri için çalışır. Şuna
— csandreas1
2
Bu teknik tüm iframe'ler için işe yarayacak, hile, iframe'deki içeriğin de duyarlı olması gerekecek, daha fazlası burada: benmarshall.me/responsive-iframes
— Ben Marshall
68

Duyarlı hale getirmek için bu kodu kullanmayı deneyin

iframe, object, embed {
    max-width: 100%;
}
— Connor Yastık Mulhall
kaynak
37
Bu kodla kabın yüksekliğini ayarlamıyorsunuz.
— reggie
46

Dave Rupert / Chris Coyier'den bir çözüm buldum. Ancak, kaydırma kullanılabilir hale getirmek istedim, bu yüzden bu ile geldi:

// 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%;
}
— Avi
kaynak
2
içerik dolgusu altının içerik genişliği oranı, 800x600% 75, 800x536% 67 ise
— nerkn
1
Bu, iframe'lerin sarafi ve tüm cihazlar için kaydırılması için iyi bir başlangıç ​​noktasıdır. very sad though ....
— klewis
Bu tam olarak 5000 pikselden uzun olduğu için iframe'in kaydırılmasına izin vermek için ihtiyacım olan şey. Diğer kodlar, uzun iFrame'i aşağıdaki içeriğin üzerine yerleştirmeye zorladı.
— penmas
16: 9 için dolgu altlığı% 56.25 olmalıdır
— Sergey Sklyar
17

Bu sitede belirtilen bu hileleri http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php adresinde kullanabilirsiniz .

Çok kullanışlı ve anlaşılması kolay. Oluşturmanız gereken tek şey

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

İşte gösteri için düzenlenmiş js keman .

— Pragnesh Chaudhari
kaynak
10

bu çözümü inceleyin ... benim için çalışıyor >> 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>
— Leo Leoncio
kaynak
Orada yanlış parçalar olduğu için kemanınızı güncelledim. Aynı ve aynı şekilde çalışıyor ama kafa karıştırıcı bitler olmadan. jsfiddle.net/6NSX3/263
— Techno.Shaman
IOS yüksekliği doğru hesaplamaz, gezinme çubuğunu dikkate alır. Ayrıca IOS üzerindeki Iframe kaydırılamaz.
— Tine Koloini
6

DA haklı. Kendi kemanınızda iframe gerçekten duyarlı. Firrame'de iframe kutu boyutlandırmasını kontrol ederek bunu doğrulayabilirsiniz. Ancak bu iframe içindeki bazı öğeler yanıt vermez, bu nedenle pencere boyutu küçük olduğunda "dışarı çıkar". Örneğin, div#products-post-wrappergenişliği 8800 pikseldir.

— Philip007
kaynak
5

iFrames, en boy oranını İçsel Oran Tekniği adı verilen küçük bir CSS tekniği ile korurken TAMAMEN tepki verebilir . Bu soruyu özellikle ele alan bir blog yazısı yazdım: https://benmarshall.me/responsive-iframes/

Bu öz:

.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>
Snippet'i genişlet

BOOM, tamamen duyarlı!

— Ben Marshall
kaynak
3

iframe'ler duyarlı olamaz. İframe kapsayıcısını duyarlı hale getirebilir, ancak kendi ayarlanmış yüksekliği ve genişliği olan bir web sayfası olduğu için görüntülediği içeriği değil.

Örnek keman bağlantısı, bildirilen bir boyutu olmayan gömülü bir youtube video bağlantısı görüntülediği için çalışır.

— MGDTech
kaynak
Bu yanıltıcı. Örnek keman bağlantısı youtube iframe genişliği ve yüksekliği belirtildiğinde de çalışır.
— Philip007
14
Bunun çok sert bir şekilde indirildiğini hayal kırıklığına uğrattım. İlettiği mesaj önemlidir; iFrame'lerin yanıt vermek için tehlikeli olduğunu çünkü kaynağın yanıt verebilirliğinin kaprisindesiniz. Evet, Youtube istisnadır. Fakat onun amacı hala geçerli.
— MattWithoos
3

CSS ile basit:

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

Lütfen dikkat : Ancak içindeki içeriği duyarlı yapmaz!

2. DÜZENLEME: İç içeriğine bağlı olarak iki tür duyarlı iframe vardır:

iframe'in içi sadece bir video veya bir görüntü içerdiğinde veya dikey olarak konumlandırılmış çok sayıda olduğunda, bunun için yukarıdaki iki satır CSS kodu neredeyse tamamen yeterlidir ve en boy oranı anlamlıdır ...

diğeri ise:

iletişim / kayıt formu içerik türü , burada en boy oranı tutmak zorunda değil , ama kaydırma çubuğunun görünmesini ve içeriğin kabın altından akmasını önlemek için. Mobil cihazlarda kaydırma çubuğunu görmezsiniz, içeriği (iframe'in) görene kadar kaydırırsınız. Tabii ki height, içerik yüksekliğinin daha dar bir ekranda meydana gelen dikey alana uyum sağlamasını sağlamak için en azından bir çeşit veriyorsunuz - örneğin, medya sorgularıyla:

@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 */
}
}
— Sándor Zuboly
kaynak
1
Bu basit ve harika
— vaishali kapadia
bu, iframe yeniden boyutlandırıldığında en boy oranını korumaz, yani genişlik ne olursa olsun yükseklik aynı kalır.
— ryan
@ryan Cevabımı güncelledim. Sana kısmen katılıyorum, btw.
— Sándor Zuboly
2

Leowebdev'in gönderisinin sonumda işe yaradığını gördüm, ancak yapmaya çalıştığım sitenin iki öğesini devirdi: kaydırma ve altbilgi.

Bir scrolling="yes" iframe gömme kodunu ekleyerek geri döndüm .

Duyarlılık nedeniyle altbilginin otomatik olarak devre dışı bırakılıp bırakılmadığından emin değilim, ancak umarım başka biri bu cevabı bilir.

— Chris Knabenshue
kaynak
2

Piksel cinsinden belirtilen iframe yüksekliğini ve genişliğini kaldırın ve yüzdeyi kullanın

iframe{  max-width: 100%;}
— Jestin
kaynak
1
Ancak, içerideki içeriği duyarlı hale getirmedi.
— Vir
1 
<div class="wrap>
    <iframe src="../path"></iframe>
</div>

.wrap { 
    overflow: auto;
}

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

@Connor Cushion Mulhall'ın kodunu ayarlayarak beni çözdü

iframe, object, embed {
  width: 100%;
  display: block !important;
}
Snippet'i genişlet

— Savangchai Saroj
kaynak
1
Başlangıç

Tarayıcı güvenlik kısıtlamaları nedeniyle, Javascript dosyasını hem "üst" sayfaya hem de bir iframe ("alt") aracılığıyla yerleştirilen sayfaya eklemeniz gerekir.

Geçerli sürümde, üst sayfa jQuery'nin en son sürümünü içermelidir. Alt sayfa işlevselliği için jQuery'ye bağımlılık yoktur. Gelecek sürümlerde, üst öğe için jQuery bağımlılığını da kaldırmak istiyoruz.

Not: makeResponsive () işlev çağrısındaki “xdomain” parametresi isteğe bağlıdır.

Kod Örneği <!-- 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>
— Ahmed Elcheikh
kaynak
0

Aşağıdaki işaretleme ile:

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

Aşağıdaki CSS videoyu tam genişlikli ve 16: 9 yapar:

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

.video > .video__iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
  }
}
— Dorian
kaynak
0

Bu konu hakkında daha fazla arama yapıyorum ve sonunda güzel bir cevap aldım. Sen gibi deneyebilirsiniz bu :

.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>
Snippet'i genişlet

— Defne
kaynak
0

Bir "iframe" i tüm cihaz ekranlarına duyarlı ve uyumlu hale getirmek için en iyi çözüm, şu kodu uygulamanız yeterlidir (Oyunlar siteleriyle harika çalışır): 

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

Tüm cihazlarla uyumlu bir duyarlı oyun konteyneri arıyorsanız, gelişmiş CSS @ medya sorguları kullanan bu kodu uygulayın.

— Mizo Oyunları
kaynak
Merhaba, Iframe html kodu basit sadece şuna benzer:
— Mizo Games
<div class = "iframe"> <iframe src = ""> </iframe> </div>
— Mizo Games
Aslında bunu web sitemle kullanıyorum: Al3abMizo Games ve herhangi bir cihazda ekran boyutunda herhangi bir oyun oynayarak deneyebilirsiniz.
— Mizo Games
0

En boy oranının bilinmediği ve iFrame'deki içeriğin tamamen duyarlı olduğu durumlar için tamamen duyarlı iFrame.

Yukarıdaki çözümlerin hiçbiri benim ihtiyacım için işe yaramadı, bu da içinde tamamen duyarlı dinamik içeriğe sahip tamamen duyarlı bir iFrame oluşturmaktı. Herhangi bir en-boy oranını korumak bir seçenek değildi.

  1. Gezinme çubuğunuzun ve iFrame'in ÜZERİNDEKİ veya AŞAĞIDAKİ içeriğinin yüksekliğini alın. Benim durumumda sadece üstteki navbar'ı çıkarmam gerekiyordu ve iFrame'in ekranın en altına kadar doldurmasını istedim.

Kod: 

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

Ayrıca, yeniden boyutlandırmada işlevin bir milyon kez çağrılmaması için bir zaman aşımı oluşturdum.

— JPeG
kaynak
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
kaynak
0

Bu tam kodu inceleyin. kapları aşağıdaki kod gibi yüzde olarak kullanabilirsiniz:

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

Bu demo Sayfasına göz atın .

— M. Lak
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.