6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

iframeやvideo要素を縦横比を保ったまま縦にも横にもcssのみでレスポンシヴ

Last updated at Posted at 2018-06-14

横幅に合わせて縦横比を保ってレスポンシヴはよく見かけるのですが、縦幅に対してもレスポンシヴ(vhを使いたい時など)を見つけられなかったので備忘。

#サンプルの仕様

  • iframeの縦横比は[16:9]にて
  • 幅はWindow幅に対して[100%]
  • 高さはWindow高さに対して[80vh]

※[ ] … 必要な値に適宜置き換えて使えると思います。

#html

<div class="responsive-vertical">
  <div class="responsive-horizontal">
    <iframe width="560" height="315" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</div>

#css

.responsive-vertical{
  max-width: 100%;
  width: calc(80vh * 16 / 9);
  max-height: 80vh;
  margin: 0 auto;
}
.responsive-horizontal{
  position: relative;
  padding-top: calc(9 / 16 * 100%); /*56.25%でもOK。わかりやすいように式で出してます。*/
}
.responsive-horizontal iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#CodePen
https://codepen.io/tkshrs/pen/NzvaxK

もっと簡単な方法ご存知の方いらっしゃいましたら教えてくださいませ〜

6
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?