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


Answers

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

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

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



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




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



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

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

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




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




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

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

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




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



Начиная

Из-за ограничений безопасности браузера вам придется включить 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>



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

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




iFrames МОЖЕТ ПОЛНОСТЬЮ реагировать, сохраняя при этом их соотношение сторон с небольшой техникой CSS, называемой InStinic Ratio Technique . Я написал сообщение в блоге, посвященное этому вопросу: 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, полностью отзывчивый!




Links