11

下の空の Macbook の画像があります。

ここに画像の説明を入力

画像は1034×543です。

画面の「灰色」の領域内にYouTubeビデオを挿入したい。YouTubeビデオがラップトップ画面で再生されているように見せたいです。

また、ラップトップの画像/YouTubeビデオをスケーリングして、Webページがタブレットまたはモバイルビューにあるときに、画像とビデオが一致するように縮小する必要があります.

これを達成するために使用しようとしてfitvid.jsいますが、運がありません-ビデオを1つの静的サイズに合わせることができますが、サイズ変更時に完全に合わせることができず、変形します.

以下は私の現在のマークアップです：

html :

<div class="col-sm-12">
  <div class="title">
    <h2>What's New</h2>
    <small>ASC Sneak Peak</small>
  </div>
  <div class="macbook-wrapper">
    <iframe width="715" height="402" src="//www.youtube.com/embed/**url**" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

サス：

.macbook-wrapper{
  background: url('../img/content/home/macbook.png') no-repeat;

  .fluid-width-video-wrapper {
    width: 97.5%;
    background: #000;
  }
}
4

1 に答える 1

21

パディングとパーセンテージでいくつかの策略を植え付けることができ、それに応じてスケーリングすることができます。基本的には、コンテナに応じてスケーリングされる絶対位置の iframe を使用して、純粋に % ベースのコンテナを設定します。

HTML

<div>
  <iframe></iframe>
</div>

CSS 

div {
    position: relative;
    padding-top: 25px;
    padding-bottom: 67.5%;
}
div iframe {
    background: url(http://i.stack.imgur.com/zZNgk.png) center center no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

画面内に iframe を配置するにはbox-sizing: border-box;、いくつかを追加するだけです。paddingそれをチェックしてくださいhttp://jsfiddle.net/41sdho4w/

もう少し詳しく説明すると、ボディ/ビューポートhttp://jsfiddle.net/4g9e3ywy/に依存するのではなく、コントロールmax-widthを支援するコンテナを備えたバージョンがあります。max-height

于 2014-08-29T18:11:38.593 に答える