2017-01-07 3 views
0

私は、新しいアナウンスとブログ投稿を表示しているウェブサイトのグリッドを持っています。私は紹介ビデオ(説明/展示作業)をフィッティングしたいと望む1つの大きなコラム(ページの2/3にまたがるcol-sm-8)を持っています。レスポンシブビデオでブートストラップカラムの背景を入力する

私はより良い以下これを説明するためのイメージを作成しました(YouTubeと試みることは埋め込み、インターネットの周りのカップルのチュートリアル)、このための背景としてきれいに再生する動画を取得するように見えることはできません。 enter image description here

どれでも助け、または正しい方向へのちょうどショックは非常に高く評価されるでしょう!

おかげ

よりよい規模のため

更新画像:

enter image description here

+1

あなたはまだ何を試してみましたか?あなたのコードはどこですか? – mlegg

+0

ちょっとmlegg、私はいくつかのことを試しました、私はちょうど一般的に列の全領域をカバーする完全なビデオを取得することはできません。動画の反応はうまくいくようです(YouTubeの埋め込みにもかかわらず、一杯になることはありません)。私はあなたのために1秒で古いモックアップを投稿します。 – CGKeaton

答えて

0

をあなたはユーチューブビデオ、またはその領域の内側にきれいに表示するための任意のビデオを取得することができなくなりますので、私はあなたを示唆ビデオのために割り当てた部屋のサイズをビデオのより良いサイズに変更してください。

+0

Hey @Oily Barrett - そうだね、更新されたショットをチェックしよう。 – CGKeaton

+0

さて、あなたはおそらくあなたがビデオのHTMLタグを使用して、地域に合わせてそれをスタイルすることができますが、ローカルに格納されているビデオを必要とするか、直接どこにリンクすることができます最高のフィットを得るために、 –

0

これは、応答可能なYouTubeの埋め込みコードです。幅と高さはYouTubeによって与えられました。あなたはあなたのページをどのようにしたいかの残りの部分を考え出す必要があります。

/* Flexible iFrame */ 
 
    
 
.flexible-container { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    padding-top: 30px; 
 
    height: 0; 
 
    overflow: hidden; 
 
} 
 
    
 
.flexible-container iframe, 
 
.flexible-container object, 
 
.flexible-container embed { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}
<!-- Responsive iFrame --> 
 
<div class="flexible-container"> 
 
<iframe width="560" height="315" src="https://www.youtube.com/embed/FSvNhxKJJyU" frameborder="0" allowfullscreen></iframe> 
 
</div>

関連する問題