Как я могу сделать iframe отзывчивым внутри другого div? - PullRequest
Новая
       19

Как я могу сделать iframe отзывчивым внутри другого div?

0 голосов
/ 04 сентября 2018

У меня есть iframe, который внутри div, который выровнен по левому краю на странице (только на большом экране, опускается ниже и должен быть такой же ширины, как и экран). Я хочу, чтобы iframe уменьшалась в масштабе, когда экран меньше. В настоящее время он просто обрезает кадр.

Вот что у меня есть

Мой HTML: 

<div id="top_right">

    <iframe id="forecast_embed" type="text/html" height="250" width="100%" frameborder="0" [src]='mylink'> </iframe>

 </div>

Мой css: 

 @media only screen and (max-width: 1000px) {
     iframe {
      display:block;
      width:100%;
    }

    #top_right_div {
      width: 100%;
      display: inline-block;
      /* height: 260px; */
    }
 } 
@media only screen and (min-width: 1000px) {
     iframe {
      display:block;
      width:100%;
    }

    #top_right_div {
      width: 40%;
      display: inline-block;
      /* height: 260px; */
    }
 }

Просто не уверен, куда идти отсюда. Спасибо

1 Ответ

0 голосов
/ 04 сентября 2018

У нас был трюк, когда я работал над адаптивным видео для встраивания, я искал его и нашел, это было что-то вроде ниже.

У вас был бы контейнер и ваш фрейм. Как это: 

<div class="resp-container">
    <iframe class="resp-iframe" src="https://www.youtube.com/embed/dQw4w9WgXcQ" gesture="media"  allow="encrypted-media" allowfullscreen></iframe>
</div>

А затем нарисуйте их так: 

.resp-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

.resp-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

Вот кодекс, который я создал, чтобы проверить его https://codepen.io/julia-cipriani-corvalan/pen/Eemery

И источник: https://blog.theodo.fr/2018/01/responsive-iframes-css-trick/

Дайте мне знать, если поможет,

...