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

144

Я читал этот пост, посвященный стеку, под названием «Можете ли вы сделать 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%;
}

css iframe responsive-design Brighton
источник

6

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

DA.

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

Джон Смит

1

Я предпочитаю чистый css: stackoverflow.com/a/26194041/274502

cregox

107

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

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

Омар
источник

4

Смотрите также эту статью, объясняющую эту технику более подробно: smashingmagazine.com/2014/02/…

Томас Темпельманн

работает только для фреймов YouTube. Смотрите это: jsfiddle.net/1bd8qw76

csandreas1

2

Эта техника будет работать для всех iframe, уловка в том, что содержимое iframe также должно быть отзывчивым, подробнее об этом здесь: benmarshall.me/responsive-iframes

Ben Marshall

68

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

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

Коннор Кушон Малхолл
источник

37

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

Реджи

46

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

// 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
источник

2

будущие заметки для меня, если padding-bottom контента - это отношение ширины контента, 800x600 - это% 75, 800x536 - это% 67

nerkn

1

Это хорошая отправная точка для создания прокрутки в фреймах для sarafi и всех устройств. очень печально, хотя ....

Klewis

Это именно то, что мне нужно, чтобы прокрутить iframe, так как он был длиннее 5000 пикселей. Другие коды заставили длинный iFrame перекрывать нижеследующее содержимое.

Пенмас

для 16: 9 отступы должны составлять 56,25%

Сергей Скляр

17

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

Прагнеш Чаудхари
источник

10

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

Techno.Shaman

IOS неправильно вычисляет высоту, она учитывает навигационную панель. Также Iframe на IOS не прокручивается.

Тине Колоини

9

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

Кристиан Майкл
источник

6

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

Philip007
источник

5

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>

Развернуть фрагмент

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

Бен Маршалл
источник

3

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

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

MGDTech
источник

Это вводит в заблуждение. Ссылка примера скрипта работает также хорошо, когда ширина и высота iframe заданы.

Philip007

14

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

MattWithoos

3

Простой, с 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 */
}
}

Шандор Зуболы
источник

1

это просто и

круто

это не поддерживает соотношение сторон при изменении размера iframe, то есть высота остается неизменной независимо от ширины.

Райана

@ Райан Я обновил свой ответ. Я частично согласен с вами, кстати.

Шандор Зуболы,

2

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

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

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

Крис Кнабеншу
источник

2

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

iframe{  max-width: 100%;}

Jestin
источник

1

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

Vir

1

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

.wrap { 
    overflow: auto;
}

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

Сарань
источник

1

это решило меня, настроив код из @Connor Cushion Mulhall с помощью

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

Развернуть фрагмент

Савангчай Сарой
источник

1

Начиная

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

В текущей версии родительская страница должна включать в себя последнюю версию 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>

Ахмед Эльчейх
источник

0

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

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

Дориан
источник

0

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

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

Развернуть фрагмент

лавр благородный
источник

0

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

Mizo Games
источник

Привет, HTML-код Iframe прост, просто выглядит так:

Mizo Games

Mizo Games

На самом деле я использую его на своем веб-сайте: Al3abMizo Games, и вы можете попробовать его, играя в любую игру на любом устройстве, независимо от размера экрана.

Mizo Games

0

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

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

Jpeg
источник

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
источник

0

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

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

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

М. Лак
источник

0

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

Vishwas
источник

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

Ответы: