Пустое пространство или обрезка на вставках iframe - PullRequest
Новая
       36

Пустое пространство или обрезка на вставках iframe

0 голосов
/ 22 октября 2019

Я использую вставки из Bandcamp, которые изначально имели фиксированную высоту и ширину пикселей. Я хочу, чтобы они были текучими, но когда они изменяют размер, они либо обрезают информацию, либо оставляют большое пустое пространство, которое не является полем снизу. Я пытался заставить их отображать: встроенный блок, основываясь на некоторых других постах, которые я нашел здесь, но это, похоже, не изменило их поведениеКак я могу стилизовать эти встраивания, чтобы они просто плавно меняли размеры, не создавая пробелов или обрезки? (Пожалуйста, см. Прикрепленный пост imgur и страницу сайта для примеров).

HTML: 

  <div id="content-wrap">

    <div id="bandcamp-cluster">
      <iframe class="bandcamp-item" src="https://bandcamp.com/EmbeddedPlayer/album=2945394430/size=large/bgcol=333333/linkcol=ffffff/tracklist=false/transparent=true/" seamless><a href="http://themanwhofellinbuffalo.bandcamp.com/album/said-i-never-said-that">said, &quot;i never said that!&quot; by the man who fell in buffalo</a></iframe>
      <iframe class="bandcamp-item" src="https://bandcamp.com/EmbeddedPlayer/album=356760476/size=large/bgcol=333333/linkcol=ffffff/tracklist=false/transparent=true/" seamless><a href="http://themanwhofellinbuffalo.bandcamp.com/album/still-talked-about-the-war">still talked about the war by the man who fell in buffalo</a></iframe>
      <iframe class="bandcamp-item" src="https://bandcamp.com/EmbeddedPlayer/album=2196331708/size=large/bgcol=333333/linkcol=ffffff/tracklist=false/transparent=true/" seamless><a href="http://themanwhofellinbuffalo.bandcamp.com/album/nearly-caught-the-railing">nearly caught the railing by the man who fell in buffalo</a></iframe>
      <iframe class="bandcamp-item" src="https://bandcamp.com/EmbeddedPlayer/album=3068574217/size=large/bgcol=333333/linkcol=ffffff/tracklist=false/transparent=true/" seamless><a href="http://themanwhofellinbuffalo.bandcamp.com/album/probably-broke-his-hip">probably broke his hip by the man who fell in buffalo</a></iframe>
      <iframe id="soundcloud-player" width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/124969574&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>

    </div>


  </div>

CSS: 

/* page content, embeds, images */

#content-wrap {
  width: 70%;
  margin: 0 auto;
  float: right;
  /* border: 1px solid red; */
}

#bandcamp-cluster {
  /* border: 1px dotted red; */
  display: block;

  display: grid;
  grid-gap: 1vw;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);

  margin: 2vh;
  margin-top: 40vh;
  /* padding: 2vh; */


  width: 90%;
  height: 200vh;
}

.bandcamp-item {
  display: block;
  margin: 0;
  border: 0;
  /* width: 32vw;
  height: 82vh; */
  width: 100%;
  height: 100%;
  box-shadow: 1px 2px 7px black;


}

iframe {

}

#soundcloud-player {
  width: 200%;
  height: 40vh;
  box-shadow: 1px 2px 7px black;
  margin-bottom: 4vh;
  /* margin-right: 1vw; */
}

Вот ссылка на страницу моеговеб-сайт, который использует iframes:

https://www.themanwhofellinbuffalo.com/music.html

Вот несколько скриншотов проблемы:

https://imgur.com/a/Cs6IrWY

...