Зробити відповідний кадр iframe

144

Я читав це повідомлення про stackoverflow під назвою "Чи можете ви зробити iFrame чуйним?", І один із коментарів / відповідей привів мене до цього jfiddle.

Але коли я спробував реалізувати HTML та CSS, щоб відповідати моїм потребам, у мене не було однакових результатів / успіху. Я створив свою власну загадку JS, щоб я міг показати вам, як для мене це не працює. Я впевнений, що це пов’язане з типом iFrame, який я використовую (наприклад, зображення виробів, можливо, також повинні відповідати чи щось?)

Моє основне занепокоєння полягає в тому, що коли читачі мого блогу відвідують мій блог на своєму iPhone, я не хочу, щоб все було на ширині x (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 
— Брайтон
джерело
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-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/…
— Томас Темпельман
працює лише для iframe youtube. Дивіться це: jsfiddle.net/1bd8qw76
— csandreas1
2
Ця методика буде працювати для всіх кадрів iframes, фокус у тому, що вміст у iframe також повинен відповідати, докладніше про це тут: benmarshall.me/responsive-iframes
— Бен Маршалл
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%;
}
— Аві
джерело
2
майбутня зауваження для мене, якщо зміст нижнього вмісту - це співвідношення ширини вмісту, 800x600 - це% 75, 800x536 -% 67
— nerkn
1
Це хороша відправна точка для того, щоб зробити iframes для прокрутки сарафі та всіх пристроїв. дуже сумно, хоча ....
— klewis
Це саме те, що мені потрібно, щоб дозволити прокручування iframe, оскільки це було понад 5000 пікселів. Інші коди змусили довгий iFrame перекрити нижченаведений вміст.
— penmas
для 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 не прокручується.
— Тіне Колоїні
6

DA має рацію. У вашій власній загадці рамка дійсно чутлива. Ви можете перевірити це у firebug, встановивши прапорці рамки iframe. Але деякі елементи цього рамки не реагують, тому вони "стирчать", коли розмір вікна невеликий. Наприклад, div#products-post-wrapperширина '8800px.

— 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

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

Приклад скрипкової посилання працює, оскільки відображає вбудовану відеопосилання YouTube, що не має оголошеного розміру.

— MGDTech
джерело
Це вводить в оману. Приклад скрипкового посилання також працює, коли вказані ширина та висота iframe youtube.
— 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-е редагування: Існує два типи чутливих кадрів, що реагують, залежно від їх внутрішнього змісту:

той , який , коли всередині фрейму містить тільки на відео або в зображення або багато вертикально розташований, для яких зазначені вище два рядки коду 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
це просто і приголомшливо
— вайшали кападію
це не підтримує співвідношення сторін, оскільки розмір рамки змінюється, тобто висота залишається однаковою незалежно від ширини.
— ryan
@ryan Я оновив свою відповідь. Я частково з вами згоден, btw.
— Сандор Зуболій
2

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

Прокручування я повернув, додавши scrolling="yes" до коду вбудовування iframe.

Я не впевнений, чи автоматично колонтитул вибивається через чуйність чи ні, але, сподіваюся, хтось інший знає цю відповідь.

— Кріс Кнабеншуе
джерело
2

Видаліть висоту та ширину рамки, вказану в пікселях, та використовуйте відсоток

iframe{  max-width: 100%;}
— Джестін
джерело
1
Але всередині вмісту не було чуйним.
— Вир
1 
<div class="wrap>
    <iframe src="../path"></iframe>
</div>

.wrap { 
    overflow: auto;
}

iframe, object, embed {
    min-height: 100%;
    min-width: 100%;
    overflow: auto;
}
— Саран
джерело
1
Починаємо

Через обмеження безпеки браузера вам доведеться включати файл Javascript як на "батьківську" сторінку, так і на сторінку, вбудовану через рамку ("дочірня").

У поточній версії батьківська сторінка повинна містити останню версію 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>
— Ахмед Ельчейх
джерело
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.

— Ігри Мізо
джерело
Привіт, HTML-код iframe простий просто виглядає так:
— Mizo Games
<div class = "iframe"> <iframe src = ""> </iframe> </div>
— Mizo Games
Насправді я використовую його на своєму веб-сайті: Al3abMizo Games, і ви можете спробувати його, граючи в будь-яку гру на будь-якому пристрої будь-якого розміру екрана.
— Mizo Games
0

Повністю чуйна 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);
    };

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

— 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%;
}
— КТріведі
джерело
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>

Перегляньте цю демонстраційну сторінку.

— М. Лак
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.