表示されたビデオをdivの背景に合わせるにはどうすればいいですか？

Question

誰かがウェブサイトの背景にビデオをフィットさせるのに役立つことができますか？ビデオソースは、Vimeoのからです...私はsrcとビデオを設定しIFRAME

<iframe src="https://player.vimeo.com/video/45628635?loop=1&background=1" width="100%" height="500px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 

あなたは背景がビデオの一部と思われる画像

Answer 1

、iframeタグに独自のクラスを与えるので、同じように、親コンテナに入れて。

<div class="container"> 
    <iframe class="vid" src="https://player.vimeo.com/video/45628635?loop=1&background=1" width="100%" height="500px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
</div> 

次いでスケールアップビデオを変換し、得500pxなどの100％と高さのコンテナ幅とオーバーフローを非表示にCSSを使用して。

.vid{ 
    transform: scale(2.5); 
} 

.container{ 
    width: 100%; 
    height: 500px; 
    overflow: hidden; 
} 

そして、この「コンテナ」のdivをに位置するつもりどんなオブジェクトに隠されたオーバーフローを置く。

Answer 2

で見ることができる私の必要な状態を使用します。この例のように、黒の背景をカットするように幅を変更することができます。 width:93%https://jsfiddle.net/ps96r3ub/

"https://player.vimeo.com/video/45628635?loop=1&background=1" 幅= "93％" 高さ= "500pxなど" FRAMEBORDER = "0" webkitallowfullscreen mozallowfullscreen allowfullscreen>Swordysコードから

Answer 3

...チェックこのスニペット...

.container{ 
 
    width:100%; 
 
    height:500px; 
 
    overflow:hidden; 
 
    } 
 
.vid{ 
 
transform: scale(2.5); 
 
}

<div class="container"> 
 
<iframe class="vid" src="https://player.vimeo.com/video/45628635?loop=1&background=1" width="80%" height="500px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
 
    </div>