Создание адаптивного фрейма

Я читал этот пост, посвященный стеку, под названием «Можете ли вы сделать iFrame отзывчивым?», И один из комментариев / ответов привел меня к этому jfiddle.

Но когда я попытался реализовать HTML и CSS, чтобы удовлетворить свои потребности, у меня не было таких же результатов / успеха. Я создал свою собственную скрипку JS, чтобы показать вам, как она работает не для меня. Я уверен, что это как-то связано с типом iFrame, который я использую (например, изображения продукта могут быть слишком адаптивными или что-то в этом роде?)

Моя главная проблема заключается в том, что когда мои читатели блога посещают мой блог на своем iPhone, я не хочу, чтобы все было на ширине х (100% для всего моего контента), а затем iFrame плохо себя ведет и является единственным элементом шире (и, следовательно, придерживается мимо всего другого контента - если это имеет смысл ??)

В любом случае, кто-нибудь знает, почему это не работает? Спасибо.

вот HTML и CSS МОЕГО JSFIDDLE (если вы не хотите нажимать на ссылку):

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

Представляю вам решение Невероятной Поющей Кошки =)

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

Я нашел решение от Дейва Руперта / Криса Койера. Тем не менее, я хотел сделать свиток доступным, поэтому придумал следующее:

// 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 скрипка для демонстрации.

проверить это решение ... работает для меня >> 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>

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

DA прав. В вашей собственной скрипке, iframe действительно отзывчивый. Вы можете проверить это в firebug, проверив размер окна iframe. Но некоторые элементы внутри этого iframe не реагируют, поэтому они «торчат», когда размер окна небольшой. Например, div#products-post-wrapperширина составляет 8800 пикселей.

iFrames МОГУТ БЫТЬ полностью ЧУВСТВИТЕЛЬНЫМИ, сохраняя при этом их соотношение сторон с помощью небольшой техники 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>

БУМ, полностью отзывчивый!

iframes не могут быть отзывчивыми. Вы можете сделать контейнер iframe отзывчивым, но не содержимое, которое он отображает, так как это веб-страница, которая имеет свои собственные заданные высоту и ширину.

Ссылка примера скрипта работает, потому что она отображает встроенную ссылку на видео YouTube, размер которой не объявлен.

Простой, с CSS:

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

Пожалуйста, обратите внимание : но это не сделает контент внутри него отзывчивым!

2-е РЕДАКТИРОВАНИЕ: Есть два типа отзывчивых iframes, в зависимости от их внутреннего содержания:

тот , который , когда внутри фрейма содержит только на видео или в изображение или многие вертикально расположенный, для которых указанные выше две строки кода 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 */
}
}

Я заметил, что пост leowebdev, кажется, работал на моем конце, однако, он выбил два элемента сайта, которые я пытаюсь создать: прокрутку и нижний колонтитул.

Прокрутка я вернулся, добавив scrolling="yes" код для вставки в iframe.

Я не уверен, автоматически ли выбивается нижний колонтитул из-за отзывчивости или нет, но, надеюсь, кто-то другой знает этот ответ.

Удалите высоту и ширину iframe, указанные в пикселях, и используйте процент

iframe{  max-width: 100%;}

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

Из-за ограничений безопасности браузера вы должны будете включить файл Javascript как на «родительскую» страницу, так и на страницу, внедряемую через iframe («дочерний»).

В текущей версии родительская страница должна включать в себя последнюю версию jQuery. Нет никакой зависимости от jQuery для функциональности дочерней страницы. В будущих версиях мы хотели бы также удалить зависимость от jQuery для родителя.

Примечание: параметр «xdomain» в вызове функции makeResponsive () является необязательным.

Со следующей разметкой:

<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 полностью реагирует на ситуации, когда соотношение сторон неизвестно, а контент в iFrame полностью отзывчив.

Ни одно из вышеперечисленных решений не сработало для меня, а именно для создания полностью адаптивного iFrame с полностью адаптивным динамическим контентом. Поддерживать любое соотношение сторон не было возможным.

1. Получите высоту вашей панели навигации и любой контент выше или ниже iFrame. В моем случае мне нужно было только вычесть верхнюю панель навигации, и я хотел, чтобы iFrame заполнял весь экран до нижней части экрана.

Код:

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

Я также создал тайм-аут, чтобы при изменении размера функцию не вызывали миллион раз.

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

Проверьте этот полный код. Вы можете использовать контейнеры в процентах, как показано ниже:

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

Проверьте эту демонстрационную страницу.

Это решение сработало для меня. И мне было проще. https://jameshfisher.com/2017/08/30/how-do-i-make-a-full-width-iframe/