Chromeのコンテナに合わせてhtml5ビデオ要素を縮小する

Question

ビデオをコンテナに収める必要がある場合はビデオを縮小する必要があります。 FireFoxで動作させることはできましたが、ビデオを縮小できませんでした。クロム。 FireFoxの

で

.media-player video { 
    cursor  : pointer; 
    max-height : 100%; 
    z-index : 0; 
    display : block; 
    margin  : auto; 
    max-width : 100%; 
} 

クロームでそれだけ縮小する必要があるときビデオは、容器の外にきしむされていることを

注意してください。動画要素のクロムを強制的にmax-height : 100%;にすることはできますか？

* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.video-container { 
 
    position : absolute; 
 
    top  : 0; 
 
    left  : 0; 
 
    right : 0; 
 
    bottom : 0; 
 
} 
 

 
.container{height:300px;} 
 
.col { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
} 
 
.col-center { 
 
    align-items: center; 
 
    justify-content: space-around; 
 
} 
 
.box { 
 
    flex: auto; 
 
    min-height: 0; 
 
} 
 

 
.box-shrink { 
 
    flex: 0 1 auto; 
 
    min-height: 0; 
 
} 
 

 
.media-player { 
 
    position: relative; 
 
    min-width: 250px; 
 
    margin: auto; 
 
} 
 

 
video { 
 
    cursor: pointer; 
 
    max-height: 100%; 
 
    z-index: 0; 
 
    display: block; 
 
    margin: auto; 
 
    max-width: 100%; 
 
}

<div class="col box container"> 
 
    <div class="media-player video box"> 
 
    <div class="col col-center box video-container"> 
 
    <video controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif"> 
 
     <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm"> 
 
    </video> 
 
    </div> 
 
    </div> 
 
    <div class="media-player video box"> 
 
    <div class="col col-center box video-container"> 
 
    <video controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif"> 
 
     <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm"> 
 
    </video> 
 
    </div> 
 
    </div> 
 
    <div class="media-player video box"> 
 
    <div class="col col-center box video-container"> 
 
    <video controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif"> 
 
     <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm"> 
 
    </video> 
 
    </div> 
 
    </div> 
 

 
</div>

クロムに切り取らとFirefoxが違いを見て実行します。

更新：今のところ絶対位置で修正してスニペットを更新しました。いずれかがよりよい解決策を持っている場合...

Answer 1

主要な問題は、すなわち.media-player（.box-shrink）div Sビデオラッパーのheightであるようです。

のサイズは%に設定されています。したがって、内部にはmax-のプロパティを含めるには、参照の高さ/幅が必要です。親divには高さが設定されていないため、参照はありません。 flex-basisは参考文献（）の影響を受けていないため、Firefoxでの効果はバグと思われます。ここで参照から

：autoのflex-basis値についてhttps://www.w3.org/TR/css-flexbox-1/#flex-property、それは言う：

フレックス項目を指定した場合、autoキーワードを使用フレックスとして メインsizeプロパティの値を取得します-基礎。その値自体が autoの場合、使用される値はcontentです。

クロムがその仕様を尊重しているようです。ラップdivにheightがない場合、flex-basisのautoは、ビデオのデフォルトサイズであるコンテンツのサイズを取得する必要があります。とにかくmax-サイズは、親に適切なサイズがなければ機能しないはずです。 flex-basisの絶対値を使用すると、flex-growが0に設定されているため、flex-basisは要素のメインサイズではなく開始サイズのみを意味するため、この場合は役に立ちません。

また、min-widthが250pxに設定されていることに注意してください。ビデオがその幅内に収まる限り（外側のコンテナサイズとflex-a-magicに基づいて）、大丈夫です。それ以外の場合は、それも調べる必要があります。

回避策

は、あなたのラッパーdivに可能な最小サイズを提供します。外側のcontainerが小さすぎる場合は、内側のラッパーに小さなサイズを使用してください。私はクロム、Firefox、およびエッジで働いて、それをテストしてみたhttps://jsfiddle.net/abhitalks/Lzneg58y/

：

は、ここで例を参照してください。

この例では、私は32pxのサイズを実証できるように設定しました。コンテナの高さは300pxの80vhで、サイズ変更や効果の確認が容易です。

そして、コンテナ内のスペースが増えるとラッパーが大きくなるようにflex-growを設定します。

スニペット：

* { box-sizing: border-box; margin: 0; padding: 0; } 
 
.container { height: 80vh; width: 80vw; margin: 8px; border: 2px solid #000; } 
 
.col { display: flex; flex-direction: column; justify-content: space-between; } 
 
.box { flex-basis: auto; } 
 

 
.box-shrink { 
 
\t flex: 1 1 auto; height: 32px; margin: 4px; 
 
\t border: 2px solid #00f; 
 
} 
 
video { 
 
\t max-height: 100%; max-width: 100%; 
 
\t display: block; margin: 0px auto; border: 2px solid #f00; 
 
}

<div class="col box container"> 
 
\t <div class="media-player video box-shrink"> 
 
\t \t <video controls> 
 
\t \t <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm"> 
 
\t \t </video> 
 
\t </div> 
 
\t <div class="media-player video box-shrink"> 
 
\t \t <video controls> 
 
\t \t <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm"> 
 
\t \t </video> 
 
\t </div> 
 
\t <div class="media-player video box-shrink"> 
 
\t \t <video controls> 
 
\t \t <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm"> 
 
\t \t </video> 
 
\t </div> 
 
</div>