Tornando um iframe responsivo

144

Eu estava lendo esta postagem de stackoverflow intitulada "Você pode fazer um iFrame responsivo?", E um dos comentários / respostas me levou a esse jfiddle.

Mas quando tentei implementar o HTML e CSS para atender às minhas necessidades, não tive os mesmos resultados / sucesso. Criei meu próprio violino JS para mostrar como ele não funciona da mesma maneira para mim. Tenho certeza de que tem algo a ver com o tipo de iFrame que estou usando (por exemplo, as imagens do produto também precisam ser responsivas ou algo assim?)

Minha principal preocupação é que, quando os leitores do meu blog visitam o meu blog no iPhone, não quero que tudo esteja na largura x (100% para todo o meu conteúdo) e o iFrame se comporta mal e é o único elemento mais amplo (e, portanto, fica além de todo o outro conteúdo - se isso faz sentido ??)

Enfim, alguém sabe por que não está funcionando? obrigado.

Aqui está o HTML e CSS do MY JSFIDDLE (se você não quiser clicar no link):

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

e aqui está o CSS que acompanha:

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

6

O próprio iframe ('a caixa') pode ser responsivo. Mas tudo dentro do iframe é uma página separada e, portanto, não está no domínio do seu CSS nem JS.

— DA.

você pode usar o easyXDM para comunicação entre a página em que o i-frame está incorporado e o documento no servidor para o qual o iframe está apontando.

— John Smith

1

Eu prefiro CSS puro: stackoverflow.com/a/26194041/274502

— cregox 4/14

107

Apresento a você a solução The 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/
Ao mover a barra da janela, você verá o iframe para redimensionar responsivamente

Como alternativa, você também pode usar a técnica da razão intrínseca - esta é apenas uma opção alternativa da mesma solução acima (tomate, tomate)

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

4

Veja também este artigo que explica esta técnica em mais detalhes: smashingmagazine.com/2014/02/…

— Thomas Tempelmann

só funciona para iframes do youtube. Veja isto: jsfiddle.net/1íciaqw76

— csandreas1

2

Essa técnica funcionará para todos os iframes, o truque é que o conteúdo do iframe também precisará ser responsivo, mais sobre isso aqui: benmarshall.me/responsive-iframes #

— Ben Marshall

68

Tente usar esse código para torná-lo responsivo

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

— Almofada Connor Mulhall
fonte

37

Você não está ajustando a altura do contêiner com este código.

— 22615 Reggie

46

Encontrei uma solução de Dave Rupert / Chris Coyier. No entanto, eu queria disponibilizar o pergaminho, então criei isso:

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

2

nota futuro para mim se o conteúdo padding-bottom é relação entre a largura de conteúdo, 800x600 é% 75, 800x536 é% 67

— nerkn

1

Este é um bom ponto de partida para fazer iframes rolar para sarafi e todos os dispositivos. muito triste ...

— klewis

Isso é exatamente o que eu precisava para permitir que o iframe rolasse, pois ele tinha mais de 5000 px. Os outros códigos forçaram o iFrame longo a sobrepor o conteúdo abaixo.

— penmas

para 16: 9, o preenchimento de fundo deve ser 56,25%

— Sergey Sklyar

17

Você pode usar esses truques mencionados neste site http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php .

É muito útil e fácil de entender. Tudo o que você precisa criar

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

Aqui está o seu violão js editado para demonstração.

— Pragnesh Chaudhari
fonte

10

confira esta solução ... funciona para mim >> 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
fonte

Eu atualizei o seu violino, pois havia algumas peças erradas aqui e ali. É o mesmo, e funciona da mesma forma, mas sem bits confusos. jsfiddle.net/6NSX3/263

— Techno.Shaman

O IOS não calcula a altura corretamente, leva em conta a barra de navegação. Além disso, o Iframe no IOS não pode ser rolado.

— Tine Koloini 15/03/16

9

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

— Christian Michael
fonte

6

DA está certo. No seu próprio violino, o iframe é realmente responsivo. Você pode verificar isso no firebug, verificando o tamanho da caixa do iframe. Mas alguns elementos dentro desse iframe não respondem, então eles se destacam quando o tamanho da janela é pequeno. Por exemplo, div#products-post-wrappera largura é 8800px.

— Philip007
fonte

5

Os iFrames PODEM ser TOTALMENTE responsivos, mantendo sua proporção com uma pequena técnica de CSS chamada Intrinsic Ratio Technique . Eu escrevi uma postagem no blog abordando esta pergunta especificamente: https://benmarshall.me/responsive-iframes/

Esta essência é:

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

Expandir snippet

BOOM, totalmente responsivo!

— Ben Marshall
fonte

3

iframes não podem ser responsivos. Você pode tornar o contêiner de iframe responsivo, mas não o conteúdo que está sendo exibido, pois é uma página da Web que possui sua própria altura e largura definidas.

O exemplo de link de violino funciona porque está exibindo um link de vídeo do youtube incorporado que não possui um tamanho declarado.

— MGDTech
fonte

Isso é enganador. O exemplo de link de violino também funciona quando a largura e a altura do iframe do youtube são especificadas.

— Philip007

14

Estou decepcionado por isso ser tão duramente rebaixado. A mensagem que ele está transmitindo é importante; que os iFrames são perigosos para responder, porque você está no capricho da capacidade de resposta da fonte. Sim, o YouTube é a exceção. Mas seu argumento ainda é válido.

— MattWithoos

3

Simples, com CSS:

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

Observe : mas isso não tornará o conteúdo dentro dele responsivo!

2ª EDIÇÃO:: Existem dois tipos de iframes responsivos, dependendo do conteúdo interno:

aquele em que a parte interna do iframe contém apenas um vídeo ou uma imagem ou muitos posicionados verticalmente, para os quais as duas linhas acima do código CSS são quase completamente suficientes e a proporção tem significado ...

e o outro é o:

tipo de conteúdo do formulário de contato / registro , onde não é necessário manter a proporção, mas para impedir que a barra de rolagem apareça e o conteúdo que está subindo no contêiner. No celular, você não vê a barra de rolagem, basta rolar até ver o conteúdo (do iframe). É claro que você fornece pelo menos algum tipo de height, para adaptar a altura do conteúdo ao espaço vertical que ocorre em uma tela mais estreita - com consultas de mídia, como, por exemplo:

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

1

isso é simples e terrível

— kapadia vaishali

isso não mantém a proporção da imagem à medida que o iframe é redimensionado, ou seja, a altura permanece a mesma, independentemente da largura.

— ryan

@ryan Atualizei minha resposta. Eu concordo parcialmente com você, btw.

— Sándor Zuboly

2

Percebi que a postagem de leowebdev parecia funcionar do meu lado; no entanto, ela derrubou dois elementos do site que estou tentando criar: a rolagem e o rodapé.

A rolagem que voltei adicionando um scrolling="yes" código de incorporação ao iframe.

Não tenho certeza se o rodapé é nocauteado automaticamente por causa da capacidade de resposta ou não, mas espero que alguém saiba a resposta.

— Chris Knabenshue
fonte

2

Remova a altura e largura do iframe especificadas em pixels e use a porcentagem

iframe{  max-width: 100%;}

— Jestin
fonte

1

Mas isso não tornou o conteúdo interno responsivo.

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

1

me resolveu ajustando o código do @Connor Cushion Mulhall por

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

Expandir snippet

— Savangchai Saroj
fonte

1

Começando

Devido a restrições de segurança do navegador, você deverá incluir o arquivo Javascript na página "pai" e na página incorporada por meio de um iframe ("filho").

Na versão atual, a página pai deve incluir a versão mais recente do jQuery. Não há dependência do jQuery para a funcionalidade da página filha. Nas versões futuras, gostaríamos de remover também a dependência do jQuery para o pai.

Nota: o parâmetro "xdomain" na chamada de função makeResponsive () é opcional.

Amostra de código <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>

— Ahmed Elcheikh
fonte

0

Com a seguinte marcação:

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

O CSS a seguir torna o vídeo em largura total e 16: 9:

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

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

— Dorian
fonte

0

Estou pesquisando mais sobre este tópico e, finalmente, recebo uma boa resposta. Você pode tentar como este :

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

Expandir snippet

— Louro
fonte

0

A melhor solução para tornar um "iframe" responsivo e se encaixar em todas as telas de dispositivos, basta aplicar esse código (funcionando muito bem nos sites de jogos):

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

Se você estiver procurando por um contêiner de jogos responsivo adequado para todos os dispositivos, aplique esse código que usa consultas CSS @media avançadas.

— Mizo Games
fonte

Olá, O código HTML do Iframe é simples, fica assim:

— Mizo Games

— Mizo Games

Na verdade, eu uso no meu site: Al3abMizo Games, e você pode experimentá-lo jogando qualquer jogo em qualquer dispositivo, seja qual for o tamanho da tela.

— Mizo Games

0

IFrame totalmente responsivo para situações em que a proporção é desconhecida e o conteúdo no iFrame é totalmente responsivo.

Nenhuma das soluções acima funcionou para a minha necessidade, que era criar um iFrame totalmente responsivo com conteúdo dinâmico totalmente responsivo. Manter qualquer tipo de proporção não era uma opção.

Obtenha a altura da sua barra de navegação e qualquer conteúdo ACIMA ou ABAIXO do iFrame. No meu caso, eu só precisava subtrair a barra de navegação superior e queria que o iFrame preenchesse todo o caminho até a parte inferior da tela.

Código:

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

Também criei um tempo limite para que, no redimensionamento, a função não fosse chamada um milhão de vezes.

— JPeG
fonte

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
fonte

0

Confira este código completo. você pode usar os contêineres em porcentagens como no código abaixo:

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

Confira esta página de demonstração.

— M. Lak
fonte

0

Esta solução funcionou para mim. E eu achei mais fácil. https://jameshfisher.com/2017/08/30/how-do-i-make-a-full-width-iframe/

— Vishwas
fonte