Wie versteckt man das Ende eines Videos in einer Div-Box mit Überlauf: versteckt?

Question

Ich möchte die Enden eines Videos ausblenden> (größer in der Größe) div-box wie mit einem Bild mit Überlauf: versteckt (und ohne den Anteil des Videos zu verlieren). Die Codes I verwendet:

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 TEIL

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

Answer 1

Am besten wäre es ein Plugin zu verwenden, wenn Sie es wollen Prozentsätze zu reagieren oder zu verwenden. Hier ist ein Beispiel mit Vide

Das Video ist in ein anderes Div verpackt und wenn das Plugin aufgerufen wird, dehnt es das Video, um die Wrapper-Art wie Hintergrund-Größe: Cover zu decken.

$('#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

Wenn Sie es manuell tun, hier sind die Punkte:

jsFiddle Demo

(1) Header (#dynamic) einen äußeren Behälter div ist, gestylt als position:relative. Dies ist notwendig, weil die innere DIVs nicht position:absolute gestylt werden kann, wenn ihre Eltern div gestylt entweder absolute oder relative

(2) Beide #cookvideo und #olay (Overlay) im Innern des Kopfes ist, und sind position:absolute gestylt.

(3) Das Overlay DIV sollte background-color:transparent haben und einen dicken Rahmen für den Rahmen verwenden, OR verwenden, um ein Hintergrund-Bild (png mit einer transparenten Mitte) als anspruchsvoller Rahmen.

(4) Es könnte schwierig sein, den Frame korrekt zu positionieren, da die Browser-Stylesheets (Teil jedes Browsers, nicht standardübergreifend in den Browsern) ein grundlegendes Aussehen für ein video Element haben. Sie müssen dieses Standardstyling möglicherweise übersteuern.