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

Question

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

124

Я читал https://stackoverflow.com/questions/13854198/can-you-make-an-iframe-responsive под названием "Можете ли вы сделать iFrame отзывчивым?", И один из комментариев/ответов привел меня к этому jfiddle.

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

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

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

вот HTML и CSS MY 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%;
}

Brighton 24 июль 2013, в 16:24

Источник

6

Сам iframe («ящик») может быть отзывчивым. Но все внутри iframe - отдельная страница, и поэтому не в области вашего CSS или JS.
DA. 25 июль 2013, в 20:12
0

Вы можете использовать easyXDM для связи между страницей, на которой встроен i-frame, и документом на сервере, на который указывает iframe.
john Smith 18 дек. 2013, в 18:00
1

Я предпочитаю чистый CSS: stackoverflow.com/a/26194041/274502
cregox 04 окт. 2014, в 15:11

Показать ещё 1 комментарий

Теги:

wordpress

css

iframe

responsive-design

21 ответ

Ещё вопросы

Сам iframe («ящик») может быть отзывчивым. Но все внутри iframe - отдельная страница, и поэтому не в области вашего CSS или JS.
Вы можете использовать easyXDM для связи между страницей, на которой встроен i-frame, и документом на сервере, на который указывает iframe.
Я предпочитаю чистый CSS: stackoverflow.com/a/26194041/274502

Omar · Answer 1 · 2015-04-22T00-20-00.000Z

Я представляю вам решение 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/
Когда вы перемещаете оконную панель, вы увидите, что 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%;
}

Смотрите также эту статью, объясняющую эту технику более подробно: smashingmagazine.com/2014/02/…
работает только для фреймов YouTube. Смотрите это: jsfiddle.net/1bd8qw76
Эта техника будет работать для всех iframe, хитрость в том, что содержимое iframe также должно быть адаптивным , подробнее об этом здесь: benmarshall.me/responsive-iframes

Connor Cushion Mulhall · Answer 2 · 2013-09-14T13-41-00.000Z

Попробуйте использовать этот код, чтобы сделать его отзывчивым

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

Вы не регулируете высоту контейнера с помощью этого кода.

Avi · Answer 3 · 2014-02-10T04-36-00.000Z

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

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

будущие заметки для меня, если padding-bottom контента - это отношение ширины контента, 800x600 это% 75, 800x536 это% 67
Это хорошая отправная точка для создания прокрутки в фреймах для sarafi и всех устройств. очень печально, хотя ....
Это именно то, что мне нужно, чтобы прокрутить iframe, так как он был длиннее 5000 пикселей. Другие коды заставили длинный iFrame перекрывать нижеследующее содержимое.
для 16: 9 нижний отступ должен составлять 56,25%

Pragnesh Chaudhari · Answer 4 · 2015-01-08T11-11-00.000Z

Вы можете использовать эти трюки, упомянутые на этом сайте 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 скрипка для демонстрации.

Leo Leoncio · Answer 5 · 2014-08-05T21-32-00.000Z

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

Я обновил вашу скрипку, так как здесь и там были некоторые неправильные фрагменты. Это то же самое, и это работает так же, но не путая биты. jsfiddle.net/6NSX3/263
IOS неправильно рассчитывает высоту, она учитывает навигационную панель. Также Iframe на IOS не прокручивается.

Christian Michael · Answer 6 · 2014-05-27T22-16-00.000Z

8

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

Christian Michael 27 май 2014, в 22:16

4

это был бы лучший ответ, если бы вы объяснили, почему это работает
Kate Gregory 27 май 2014, в 22:08

Philip007 · Answer 7 · 2013-08-22T20-56-00.000Z

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

Ben Marshall · Answer 8 · 2017-12-12T23-07-00.000Z

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>

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

iorgu · Answer 9 · 2017-09-18T12-19-00.000Z

Простой, с CSS:

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

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

Jestin · Answer 10 · 2015-03-15T08-00-00.000Z

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

iframe{  max-width: 100%;}

Но это не делало внутренний контент отзывчивым.

Chris Knabenshue · Answer 11 · 2014-11-13T17-55-00.000Z

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

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

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

Savangchai Saroj · Answer 12 · 2015-12-02T09-31-00.000Z

он решил меня, установив код из @Connor Cushion Mulhall на

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

Saran · Answer 13 · 2015-06-12T12-40-00.000Z

<div class="wrap>
    <iframe src="../path"></iframe>
</div>

.wrap { 
    overflow: auto;
}

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

M. Lak · Answer 14 · 2018-01-25T07-45-00.000Z

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

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

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

KTrivedi · Answer 15 · 2017-06-14T11-45-00.000Z

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

JPeG · Answer 16 · 2017-04-27T19-10-00.000Z

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

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

Получите высоту вашей панели навигации и любого содержимого ВЫШЕ или НИЖЕ 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);
    };

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

Ahmed Elcheikh · Answer 17 · 2017-01-05T09-08-00.000Z

Начиная

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

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

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

Образец кода  <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>

Al3abMizo Games · Answer 18 · 2016-08-06T13-30-00.000Z

Лучшее решение, позволяющее "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.

Можете ли вы показать, как выглядит HTML?
Привет, HTML-код Iframe прост, выглядит так:
У меня не сработало. Решение Омара сработало правильно.
На самом деле я использую его на своем веб-сайте: Al3abMizo Games, и вы можете попробовать его, играя в любую игру на любом устройстве, независимо от размера экрана.

user3951808 · Answer 19 · 2015-04-09T10-44-00.000Z

Я ищу больше об этой теме и, наконец, получу хороший ответ. Вы можете попробовать this:

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

Dorian · Answer 20 · 2015-03-26T05-30-00.000Z

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

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

MGDTech · Answer 21 · 2013-07-25T22-06-00.000Z

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

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

Это вводит в заблуждение. Ссылка примера скрипта работает также хорошо, когда ширина и высота iframe заданы.
Я разочарован, это так резко понизили. Сообщение, которое он передает, важно; что iFrames опасно делать отзывчивым, потому что вы находитесь на прихоти отзывчивости источника. Да, Youtube является исключением. Но его точка зрения остается в силе.