2017-02-02 4 views
0

埋め込みビデオをウェブページ上で小さくするようにしています。現在、それは応答性があり、応答性を維持したいと考えています。それはウェブ上ではあまりにも大きく見えますが(モバイルサイズに満足しています)、それはどのように小さくなりますか?ここでビデオサイズを調整して応答性を保ちます。

.video_wrapper { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
} 
 

 
.video_wrapper iframe { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}
<div class="video_wrapper"> 
 
    <iframe src="https://player.vimeo.com/video/24799548" width="700" height="525" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
 
</div>

私のページへのリンクが事前に https://bkwon0402.github.io/item/uxvideo.html

感謝です!

+0

''ブートストラップ 'を使いたい場合は、 'col-md'' col-sm'クラスを使って実行できます –

答えて

0

あなただけのwidthheight変更することができます。

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

を例えば90%に設定します。

0

のようなものが動作するはずです:透明とマージン置く::それは中心に保つために、自動を

.video_wrapper iframe { 
    width: 75%; 
    height:75%; 
    margin: auto; 
    padding: 0; 
    background-color: transparent; 
    overflow: hidden; 
} 

は、私は、背景を入れたことになります。

関連する問題