オーバーフローのあるdivボックスで動画の最後を非表示にするには：hidden？

Question

オーバーフローを使用した画像のように、ビデオの終端を（より大きいサイズの）div-boxに隠したい（ビデオの割合を失うことなく）。私が使用したコード：

CSS3

#cookVideo { /*Video Box*/ 
display: inline; 
position: relative; 
background-clip:border-box; 
float: left; 
z-index: 2; 
min-width: 50%; 
max-width: 50%; 
min-height: 400px; 
height: 400px; 
width: 50%; 
margin-top: -8px; 
padding: 0px; 
} 

#dynamic {/* Container - Zoom Image and Cooking Video*/ 

position: relative; 
top: 0px; 
margin-left: -11px; 
display: block; 
float: left; 
width: 100%; 
height: 382px; 
overflow: hidden; 
/*border: 1px solid green;*/ 
} 

HTML PART

<section id="midContainer"> 
    <article> 
    <header id="dynamic"> 
     <video id="cookVideo" autoplay loop> 
      <source src="css/images/Shrimpsmall.mp4"> 
     </video> 
    </header> 
    </article> 
</section> 

Answer 1

それはあなたがそれが応答するかのパーセンテージを使用したい場合は、プラグインを使用するのがベストでしょう。ここでは例を使用していますVide

ビデオは別のdivでラップされ、プラグインが呼び出されると、ビデオはbackground-size：coverの動作のようなラッパーの種類をカバーするように伸びます。

$('#cookVideo').vide();

#dynamic { 
 
    position: relative; 
 
    top: 0px; 
 
    margin-left: -11px; 
 
    display: block; 
 
    float: left; 
 
    width: 100%; 
 
    height: 382px; 
 
    overflow: hidden; 
 
    /* border: 1px solid green; */ 
 
} 
 

 

 
#cookVideo-wrapper { 
 
    display: inline; 
 
    position: relative; 
 
    background-clip: border-box; 
 
    float: left; 
 
    z-index: 2; 
 
    height: 400px; 
 
    width: 50%; 
 
    margin-top: -8px; 
 
    padding: 0px; 
 
    overflow:hidden; 
 
} 
 

 

 
#zoomImage { 
 
    display: inline; 
 
    position: relative; 
 
    float: left; 
 
    background: url("http://s3-ap-northeast-1.amazonaws.com/foodncake/css/images/Choco.jpg") center center; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-origin: content-box; 
 
    height: 400px; 
 
    width: 50%; 
 
    margin-left: 0px; 
 
    margin-top: 0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://vodkabears.github.io/vide/js/jquery.vide.min.js"></script> 
 

 
    <header id="dynamic"> 
 
     <div id="zoomImage"> </div> 
 
     <div id="cookVideo-wrapper"> 
 
      <video id="cookVideo" autoplay="" loop=""> 
 
      <source src="http://s3-ap-northeast-1.amazonaws.com/foodncake/css/images/Shrimpsmall.mp4">   
 
      </video> 
 
     </div> 
 
     </header>

Answer 2

あなたはここで、それを手動で実行する場合のポイントは以下のとおりです。

jsFiddle Demo

（1）ヘッダ（#dynamic）は、外側コンテナのdivで、 position:relativeと書かれています。 親DIVは、いずれかのスタイルabsolute又はrelative

（2）の両方#cookvideoと#olay（オーバーレイ）は、ヘッダ内にある、とposition:absoluteをスタイルされていない限り、内側のDIVはposition:absoluteをスタイルすることができないので、これは必要です。

（3）オーバーレイDIV background-color:transparentを有し、フレームのための太い境界線を使用する必要があり、ORがより洗練されたフレームとして（透明中央とPNG）背景画像を使用します。

（4）ブラウザのスタイルシート（各ブラウザの一部で、ブラウザ間で標準ではない）がvideo要素に対して基本的なスタイリングを行うため、フレームを正しく配置するのは難しいかもしれません。あなたはそのデフォルトのスタイリングを乗り越えなければならないかもしれません。