ビデオにポスター画像があり、その上に空白を残して約 40 ピクセル下に移動しています。ビデオが再生されると、上に移動し、正しい位置で再生されます。また、コントロール バーは、ビデオの下部ではなく、ビデオの垂直方向の中央に配置されます。
このビデオは Android WebView でレンダリングされています。ファントムマージンや奇妙なコントロール配置なしで、他のすべてのブラウザーで正常に動作します。
CSS のいずれかがそれをスローしている可能性があるかどうか疑問に思っています (Safari Web Inspector で計算された値を確認すると、パディングとマージンの両方が 0 です)。
ビデオのポスター画像の上には、ファントムの余白で見ることができます。ポスター画像は、ヘアライン ディバイダーと同じ高さにする必要があります。
上記の問題が関連していると思います.ビデオコントロールは、ビデオの下部に配置する必要があるときに、ビデオの垂直方向の中央に配置されます. そのマージンでビデオが上にシフトしたことがわかります。
最終的にコントロールがフェードアウトし、ビデオが正常に再生されます。
css をビデオ ポスターに直接適用する方法はありますか? ビデオとはサイズが違うので、ポスターがぎこちなく表示されていると思います。これを処理するには、どの CSS が必要かを考えています。
私のCSS fooはそれほど素晴らしいものではありません。私はよりネイティブな開発者です。