Создание чувствительного к iframe

Я читал qaru.site/info/57358/... под названием "Можете ли вы сделать 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%;
}

Ответы

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

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

Ответ 5

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

Ответ 6

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

Ответ 7

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

Ответ 8

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, полностью отзывчивый!

Ответ 9

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

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

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

Ответ 10

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

iframe{  max-width: 100%;}

Ответ 11

Простой, с CSS:

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

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

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

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

Ответ 12

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

.wrap { 
    overflow: auto;
}

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

Ответ 13

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

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

Ответ 14

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

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

Ответ 15

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

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

Ответ 16

Я ищу больше об этой теме и, наконец, получу хороший ответ. Вы можете попробовать 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>

Ответ 17

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

Ответ 18

Начиная

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

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

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

Образец кода <!-- Activate responsiveness in the "child" page --> <script src="/js/jquery.responsiveiframe.js"></script> <script> var ri = responsiveIframe(); ri.allowResponsiveEmbedding(); </script> <!-- Corresponding code in the "parent" page --> <script src="/js/jquery.js"></script> <script src="/js/jquery.responsiveiframe.js"></script> <script> ;(function($){ $(function(){ $('#myIframeID').responsiveIframe({ xdomain: '*'}); }); })(jQuery); </script>

Ответ 19

Полностью отзывчивый 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);
    };

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

Ответ 20

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

Ответ 21

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

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

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