Tworzenie responsywnych elementów iframe

144

Czytałem ten post zatytułowany „Czy możesz sprawić, by ramka iFrame reagowała?” I jeden z komentarzy / odpowiedzi doprowadził mnie do tego pliku jfiddle.

Ale kiedy próbowałem zaimplementować HTML i CSS do swoich potrzeb, nie miałem takich samych wyników / sukcesu. Stworzyłem własne skrzypce JS, więc mogłem pokazać, jak to nie działa tak samo dla mnie. Jestem pewien, że ma to coś wspólnego z typem iFrame, którego używam (np. Obrazy produktów mogą też wymagać responsywności, czy coś?)

Moim głównym zmartwieniem jest to, że kiedy czytelnicy mojego bloga odwiedzają mój blog na swoim iPhonie, nie chcę, aby wszystko miało szerokość x (100% dla całej mojej zawartości), a wtedy iFrame źle się zachowuje i jest jedynym elementem szerszym (i dlatego się trzyma poza wszystkie inne treści - czy to ma sens ??)

Zresztą, czy ktoś wie, dlaczego to nie działa? Dziękuję Ci.

oto kod HTML i CSS MOJEGO JSFIDDLE (jeśli nie chcesz klikać linku):

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

a oto towarzyszący 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
źródło
6
Sam element iframe („pudełko”) może być responsywny. Ale wszystko wewnątrz iframe jest oddzielną stroną, a zatem nie znajduje się w domenie twojego CSS ani JS.
— DA.
możesz użyć easyXDM do komunikacji między stroną, na której osadzona jest i-frame, a dokumentem na serwerze, na który wskazuje iframe.
— John Smith
1
— cregox

Odpowiedzi:

107

Przedstawiam wam rozwiązanie 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/
Gdy przesuniesz pasek okna, zobaczysz iframe do elastycznej zmiany rozmiaru

Alternatywnie możesz również użyć techniki wewnętrznego współczynnika - to tylko alternatywna opcja tego samego rozwiązania powyżej (pomidor, pomidor)

.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%;
}
— Omar
źródło
4
Zobacz również ten artykuł wyjaśniający bardziej szczegółowo tę technikę: smashingmagazine.com/2014/02/…
— Thomas Tempelmann
działa tylko w przypadku ramek iframe YouTube. Zobacz to: jsfiddle.net/1bd8qw76
— csandreas1
2
Ta technika będzie działać dla wszystkich ramek iframe, sztuczka polega na tym, że zawartość w ramkach
— Ben Marshall
46

Znalazłem rozwiązanie od Dave'a Ruperta / Chrisa Coyiera. Chciałem jednak udostępnić zwój, więc wymyśliłem to:

// 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
źródło
2
przyszła uwaga dla mnie, jeśli dopełnienie-dolne treści to stosunek szerokości zawartości, 800x600 to% 75, 800x536 to% 67
— nerkn
1
To dobry punkt wyjścia do przewijania ramek iframe w przypadku sarafi i wszystkich urządzeń. choć bardzo smutne ....
— klewis
To jest dokładnie to, czego potrzebowałem, aby umożliwić przewijanie elementu iframe, ponieważ miał ponad 5000 pikseli. Inne kody wymusiły nałożenie długiej ramki iFrame na poniższą zawartość.
— Penmas
dla 16: 9, wypełnienie-dół powinno wynosić 56,25%
— Sergey Sklyar
17

Możesz użyć tych sztuczek, o których mowa w tej witrynie http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php .

Jest to bardzo przydatne i łatwe do zrozumienia. Wszystko, czego potrzebujesz do tworzenia

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

Oto twoje edytowane skrzypce js do demonstracji.

— Pragnesh Chaudhari
źródło
10

sprawdź to rozwiązanie ... działa dla mnie >> 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
źródło
Zaktualizowałem twoje skrzypce, ponieważ tu i tam było kilka niewłaściwych utworów. Jest taki sam i działa tak samo, ale bez mylących bitów. jsfiddle.net/6NSX3/263
— Techno.Shaman
IOS nie oblicza poprawnie wysokości, bierze pod uwagę pasek nawigacji. Również iframe na IOS nie jest przewijalna.
— Tine Koloini
6

DA ma rację. Jeśli masz własne skrzypce, iframe rzeczywiście reaguje. Możesz to sprawdzić w programie firebug, sprawdzając rozmiar ramki iframe. Jednak niektóre elementy wewnątrz tego elementu iframe nie są responsywne, więc „wystają”, gdy rozmiar okna jest mały. Na przykład div#products-post-wrapperszerokość 8800px.

— Philip007
źródło
5

Ramki iFrame MOGĄ W PEŁNI reagować, zachowując proporcje dzięki niewielkiej technice CSS zwanej techniką Intrinsic Ratio . Napisałem post na blogu odnoszący się konkretnie do tego pytania: https://benmarshall.me/responsive-iframes/

Oto sedno:

.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>
Rozwiń fragment

BOOM, w pełni responsywny!

— Ben Marshall
źródło
3

ramki iframe nie mogą być responsywne. Możesz sprawić, by kontener iframe był responsywny, ale nie wyświetlaną zawartość, ponieważ jest to strona internetowa, która ma własną ustawioną wysokość i szerokość.

Przykładowy link do skrzypiec działa, ponieważ wyświetla osadzony link do filmu z YouTube, który nie ma zadeklarowanego rozmiaru.

— MGDTech
źródło
To jest mylące. Przykładowy link do skrzypiec działa również, gdy określono szerokość i wysokość ramki iframe youtube.
— Philip007
14
Jestem rozczarowany, że jest to tak surowo odrzucane. Przesłanie, które przekazuje, jest ważne; że tworzenie responsywnych ramek iFrame jest niebezpieczne, ponieważ jesteś kaprysem reakcji źródła. Tak, YouTube jest wyjątkiem. Ale jego punkt widzenia jest nadal aktualny.
— MattWithoos
3

Proste, z CSS:

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

Uwaga : ale nie spowoduje to, że zawartość w nim będzie responsywna!

2. EDYCJA:: Istnieją dwa typy responsywnych ramek iframe, w zależności od ich wewnętrznej zawartości:

który jest, gdy wewnątrz iframe zawiera tylko do filmów lub e obraz lub wiele pionowo, dla których powyższe dwóch wierszy kodu CSS jest niemal całkowicie wystarczy, a proporcje ma sens ...

a drugi to:

kontakt / formularz rejestracyjny rodzaj treści , gdzie nie musimy zachować proporcji, ale aby zapobiec pojawianiu się paska przewijania, a treści spływającej z kontenera. Na telefonie komórkowym nie widzisz paska przewijania, po prostu przewijasz, aż zobaczysz zawartość (elementu iframe). Oczywiście dajesz mu przynajmniej jakiś rodzaj height, aby wysokość treści dostosowywała się do pionowej przestrzeni występującej na węższym ekranie - z zapytaniami o media, takimi jak na przykład:

@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
źródło
1
to jest proste i niesamowite
— vaishali kapadia
nie zachowuje to współczynnika proporcji podczas zmiany rozmiaru elementu iframe, tj. wysokość pozostaje taka sama niezależnie od szerokości.
— ryan
@ryan Zaktualizowałem moją odpowiedź. Przy okazji częściowo się z tobą zgadzam.
— Sándor Zuboly
2

Zauważyłem, że post Leowebdev wydawał się działać po mojej stronie, jednak usunął dwa elementy strony, które próbuję zrobić: przewijanie i stopkę.

Przewijanie wróciłem, dodając scrolling="yes" Do kodu osadzania iframe.

Nie jestem pewien, czy stopka jest automatycznie odrzucana z powodu reakcji, czy nie, ale mam nadzieję, że ktoś inny zna tę odpowiedź.

— Chris Knabenshue
źródło
2

Usuń wysokość i szerokość ramki iframe określoną w pikselach i użyj wartości procentowej

iframe{  max-width: 100%;}
— Jestin
źródło
1
Ale nie sprawiło, że zawartość wewnętrzna była responsywna.
— 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
źródło
1

rozwiązało mnie to, dostosowując kod z @Connor Cushion Mulhall przez

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

— Savangchai Saroj
źródło
1
Pierwsze kroki

Ze względu na ograniczenia dotyczące bezpieczeństwa przeglądarki, będziesz musiał dołączyć plik Javascript zarówno na stronie „nadrzędnej”, jak i na stronie osadzanej za pomocą elementu iframe („podrzędnego”).

W obecnej wersji strona nadrzędna musi zawierać najnowszą wersję jQuery. Nie ma zależności od jQuery dla funkcji strony podrzędnej. W przyszłych wersjach chcielibyśmy usunąć zależność od jQuery również dla rodzica.

Uwaga: parametr „xdomain” w wywołaniu funkcji makeResponsive () jest opcjonalny.

Przykład kodu <!-- 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
źródło
0

Z następującymi znacznikami:

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

Poniższy kod CSS sprawia, że ​​wideo ma pełną szerokość i 16: 9:

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

.video > .video__iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
  }
}
— dorycki
źródło
0

Szukam więcej na ten temat i wreszcie otrzymuję miłą odpowiedź. Można spróbować jak to :

.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>
Rozwiń fragment

— Laur
źródło
0

Najlepszym rozwiązaniem, aby element iframe był responsywny i pasował do wszystkich ekranów urządzeń, wystarczy zastosować ten kod (doskonale współpracuje z witrynami z grami): 

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

Jeśli szukasz responsywnego kontenera gier pasującego do wszystkich urządzeń, zastosuj ten kod, który wykorzystuje zaawansowane zapytania CSS @media.

— Gry Mizo
źródło
Witam, kod html iframe jest prosty, wygląda tak:
— Mizo Games
<div class = "iframe"> <iframe src = ""> </iframe> </div>
— Mizo Games
Właściwie używam go na mojej stronie: Al3abMizo Games i możesz go wypróbować, grając w dowolną grę na dowolnym urządzeniu, niezależnie od rozmiaru ekranu.
— Mizo Games
0

W pełni responsywna iFrame w sytuacjach, gdy współczynnik proporcji jest nieznany, a zawartość iFrame jest w pełni responsywna.

Żadne z powyższych rozwiązań nie spełniło mojej potrzeby, a mianowicie stworzenia w pełni responsywnej ramki iFrame, która zawierałaby w pełni responsywną zawartość dynamiczną. Utrzymanie jakiegokolwiek współczynnika kształtu nie wchodziło w grę.

  1. Uzyskaj wysokość swojego paska nawigacyjnego i wszelkich treści POWYŻEJ lub PONIŻEJ iFrame. W moim przypadku potrzebowałem tylko odjąć górny pasek nawigacyjny i chciałem, aby element iFrame wypełnił się aż do samego dołu ekranu.

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

Utworzyłem również limit czasu, aby przy zmianie rozmiaru funkcja nie była wywoływana milion razy.

— JPeG
źródło
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
źródło
0

Sprawdź ten pełny kod. możesz używać kontenerów w procentach jak poniżej kod:

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

Sprawdź tę stronę demonstracyjną.

— M. Lak
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.