Tornando um iframe responsivo

Eu estava lendo este post stackoverflow intitulado “Você pode fazer um iFrame responsivo?”, E um dos comentários / respostas me levou a este jfiddle.

Mas quando tentei implementar o HTML e CSS para atender às minhas necessidades, não tive os mesmos resultados / sucesso. Eu 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 podem precisar ser responsivas também ou algo assim?)

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

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

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

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

Eu apresento a você a solução 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á iframe para resize responsavelmente

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

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

Eu encontrei uma solução de Dave Rupert / Chris Coyier. No entanto, eu queria disponibilizar o pergaminho para que eu fizesse isso:

// HTML

 

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

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 que você precisa para criar

 
.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 violino editado para demonstração.

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

confira esta solução … funciona para mim >> https://jsfiddle.net/y49jpdns/

             

DA está certo. Em seu próprio violino, o iframe é realmente responsivo. Você pode verificar isso no Firebug verificando o tamanho da checkbox de iframe. Mas alguns elementos dentro desse iframe não respondem, então eles “se destacam” quando o tamanho da janela é pequeno. Por exemplo, a largura de div#products-post-wrapper é 8800px.

Percebi que o post do leowebdev parecia funcionar do meu jeito, no entanto, derrubou dois elementos do site que estou tentando fazer: o scroll e o footer.

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

Não tenho certeza se o rodapé será eliminado automaticamente por causa da capacidade de resposta ou não, mas esperamos que outra pessoa saiba essa resposta.

Remover altura e largura do iframe especificada em pixels e usar porcentagem

 iframe{ max-width: 100%;} 

Os iFrames PODEM ser TOTALMENTE responsivos, mantendo sua proporção com uma pequena técnica de CSS chamada de Técnica de Proporção Intrínseca . Eu escrevi uma postagem de blog abordando especificamente essa questão: https://benmarshall.me/responsive-iframes/

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

BOOM, totalmente responsivo!

Simples, com CSS:

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

Por favor, note : Mas isso não tornará o conteúdo dentro dele responsivo!

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

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

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

Com a seguinte marcação:

 

O seguinte CSS faz o vídeo de 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; } } 

Eu estou procurando mais sobre esse assunto e finalmente recebo uma resposta legal. Você pode tentar assim:

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

A melhor solução para tornar um “iframe” responsivo e adequado a todas as canvass de dispositivos, basta aplicar esse código (funcionando muito bem com os 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 a todos os dispositivos, aplique esse código que usa consultas avançadas de CSS @media.

Começando

Devido a restrições de segurança do navegador, você terá que include o arquivo Javascript na página “pai”, bem como na página que está sendo incorporada por meio de um iframe (“filho”).

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

Nota: o parâmetro “xdomain” na chamada da function makeResponsive () é opcional.

Exemplo de código var ri = responsiveIframe(); ri.allowResponsiveEmbedding(); ;(function($){ $(function(){ $('#myIframeID').responsiveIframe({ xdomain: '*'}); }); })(jQuery);

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 minha necessidade, que era criar um iFrame totalmente responsivo que tivesse conteúdo dynamic totalmente responsivo dentro dele. Manter qualquer tipo de relação de aspecto não era uma opção.

  1. 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 fosse preenchido até a parte inferior da canvas.

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, ao resize, a function não fosse chamada um milhão de vezes.

 For Example : 
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%; }

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

   How to make Iframe Responsive    

Please scale the "result" window to notice the effect.

Confira esta página de demonstração.

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 tem sua própria altura e largura de conjunto.

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