web-dev-qa-db-ja.com

全幅vimeoラッパーの背景

Body divにあるパターンで覆われた全幅のiframe vimeo背景を作成しようとしています。ビデオはオーバーレイで覆われているため、クリックできなくなります。私はビデオに100％の幅と高さを与えようとしましたが、画面を覆うのに失敗しました。ビデオを500x250ピクセルでポップアップさせようとしています。

HTML

 <div class="video">    
    <iframe src="//player.vimeo.com/video/82123812?title=0&amp;byline=0&amp;portrait=0&amp;color=3a6774&amp;autoplay=1&amp;loop=1" width="960" height="540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>  
    <div class="overlay"></div> 
</div>

CSS

.video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.video .overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../img/overlay-pattern.png) repeat;
}
htmlcssiframevideofluid-layout
10
notcho nachos

Iframeの幅と高さ、およびそのラッパーを設定する必要があります。運のためにいくつかのZインデックスも追加しました！

こんにちは、ドル、ドル、ここにフィドルがあります： http://jsfiddle.net/n28Ef/1/

.video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.video iframe {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.video .overlay {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; 
    background: url(../img/overlay-pattern.png) repeat;
}
23
Josh Harrison

このソリューションは、CSSプロパティbackground-size: coverを完全なCSSで画像ではなくiframeを使用して複製します。

まず、vimeo iframeをラッパーに入れます。

<div class="iframe-wrapper">
  <iframe src="https://player.vimeo.com/video/123456789?autoplay=1&loop=1&byline=0&title=0">
</div>

次に、それらのスタイルを適用します。

/* Makes a fixed background wrapper
which the user cannot interact with */

.iframe-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* Make the iframe keep an aspect ratio, and
position it in the middle of its parent wrapper*/

.iframe-wrapper iframe {
  width: 100vw;
  height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
  min-height: 100vh;
  min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

さらに、Vimeoの場合、proアカウントを使用すると、プレーヤーのコントロールを削除できます。

20
Christophe Marois