コンテンツがロードされている間にボーダーサイジンググリッチが発生する

Question

ボーダー（ビデオ）のコンテンツが読み込まれる前に、私のボーダーのサイズが正しくないという問題があります。私は要素のリストを持っており、各要素をクリックすることができます - これは、それぞれの要素ごとに新しいビデオ（アニメーション）をロードします。動画の読み込み時間が短くなることがあるため、時々1-2秒かかることがあります。この間、境界線のサイズはオフになり、他の要素と重なり合っています。ビデオがロードされるとすぐに、ボーダーは正しいサイズにスナップします。

どのようにして私の国境にこれを行わないようにしますか？ここで

はHTMLです：

<div id="video"><video id="animation" autoplay="" loop="" muted=""><source src="videos/xxxxxxx.mp4" type="video/mp4"></video></div> 

は、ここに私のCSSです：

#animation{ 
border: 5px solid #c00; 
height: 100%; 
} 

#video{ 
height: 50%; 
} 

そして、ここでは（私は、ウェブサイトのテキストの上に描かれてきた）問題の写真です。ビデオが読み込まれる前に、大きすぎて重なっている境界線に注意してください。

私は提供することができます余分な情報やコードがあります場合は私に知らせてください。

Answer 1

あなたがすべきことは、ビデオの幅を何かに固定することです。 #video {width：300px;} ＃ビデオビデオ{width：100％;}