ビデオの幅をHTMLでどのように伸ばすことができますか？

ビデオHTMLタグを使用して動画を追加しようとしています。ビデオの幅をHTMLでどのように伸ばすことができますか？

これは私が使用しているCSSです：として（私はビデオが引き伸ばされたい

<div class="video"> 
<video width="1366" height="500" autoplay loop muted> 
<source src="video.mp4" type="video/mp4"> 
<source src="video.webm" type="video/webm"> 
</video> 
</div>

を：

.video { 
width: 100%; 
height: 500px; 
-webkit-transform: scaleX(2); 
-moz-transform: scaleX(2); 
} 
.video:before { 
background-image: url('http://farm8.staticflickr.com/7212/7329494986_c1191f6e55.jpg') repeat; 
width:100%; 
min-height:500px; 
}

をし、私が使用している、これはHTMLですそれは）ですが、幅はそれを超えるほど多すぎます。 THISイメージで見ることができるように、ビデオの幅は境界を超えているため、水平スクロールを追加します。私は誰かが私のこの幅の問題を解決するのを助けることを望んでいた。動画コンテンツは、映像コンテンツが完全に収まる可能な最大サイズで再生エリアの中央に示されるように、要素の再生領域内にレンダリングされなければならない

：用のスペックから

And this is the webpage I'm working on..

出典

2017-06-21 VenoM

ませブラウザは、長年にわたってのWebKitとMOZプレフィックスを必要としていません。 – Rob

HTMLとCSSの変更が

I次のスニペットを投稿しました。

ワーキングペン

working pen

.video { 
 
    width: 100%; 
 
    height: 500px; 
 
    position:relative; 
 
    /* -webkit-transform: scaleX(2); */ 
 
    /* -moz-transform: scaleX(2); */ 
 
} 
 
.video:before { 
 
    background: rgba(0,0,0,0.5); /* You can use here image */ 
 
    width:100%; 
 
    height:500px; 
 
    content:''; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
}

<div class="video"> 
 
    <video width="100%" autoplay loop muted> 
 
<source src="video.mp4" type="video/mp4"> 
 
<source src="video.webm" type="video/webm"> 
 
</video> 
 
</div>

出典

2017-06-21 11:23:12 LKG

http：// imgur。com/cZWkQYv 端を横切って伸ばしたいと思っていましたか？ – VenoM

'width：100vh;'と 'height：100vh;' – LKG

を編集しました。 – LKG

ビデオコンテンツのアスペクト比は保存されます。したがって、再生エリアのアスペクト比がビデオのアスペクト比と一致しない場合、ビデオはレターボックスまたはピラーボックスで表示されます。ビデオを含まない要素の再生領域の領域は何も表しません。

ビデオをレターボックス化する代わりに、ビデオを引き伸ばすための規定はありません。これは、ストレッチングが非常に悪いユーザーエクスペリエンスを提供し、ほとんどの時間が意図されていないためです。画像はデフォルトでは収まるように引き伸ばされているため、オンラインでひどく歪んだ画像が多数表示されます。高さと幅を指定するのは簡単な間違いが原因です。

CSS 3変換を使用すると、拡張された効果を得ることができますが、まだ完全に標準化されていないか、またはすべてのブラウザで実装されていますが、実装されている場合は、-webkit-または-moz-です。ここでは例です：

<!DOCTYPE html> 
<style> 
video { 
    -webkit-transform: scaleX(2); 
    -moz-transform: scaleX(2); 
} 
</style> 
<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv"></video>

出典

2017-06-21 10:54:27

HTML

<div class="video"> 
    <video autoplay loop muted> 
    <source src="video.mp4" type="video/mp4"> 
    <source src="video.webm" type="video/webm"> 
    </video> 
</div>

から削除幅と高さと、次のように次のCSSを変更： `

.video { 

     width: 100%; 
     height: 100%; 
     overflow: hidden; 
     -webkit-transform: scaleX(1); 
     -moz-transform: scaleX(1); 
     } 
     .video:before { 
     background-image: url('http://farm8.staticflickr.com/7212/7329494986_c1191f6e55.jpg') repeat; 
     width:100%; 
     min-height:500px; 
     }

出典

2017-06-21 11:05:02

これはウェブページがどのように表示されるかです：http://imgur.com/JwY8se6 さらに、右手で覆うスペースもあります。 – VenoM

これに応じて幅を110％に変更するか、それに応じて増やします。 –

ビデオの幅をHTMLでどのように伸ばすことができますか？

答えて

関連する問題