Zmiana rozmiaru elementu <video> elementu nadrzędnego div

Question

Czy ktoś był w stanie skutecznie zmienić rozmiar elementu video na element nadrzędny div?

Mój element wideo zawiera strumień kamery internetowej dostarczany z ratio of 4:3. Chciałbym zerwać współczynnik i dostosować go do rozmiaru div. Próbowałem następujące:

• Set width and height 100%> to nic nie robi, 4: 3 pozostaje
• Ustaw min-height and min-width 100%> to sprawia, że ​​zmiana rozmiaru wideo do czegoś naprawdę ogromne, że przelewa div
• position:absolute, bottom, top, left and right: 0px również ogromny przepływ przez nadrzędny działka
• Użycie javascript do uzyskania nadrzędnej wysokości i szerokości div, a następnie ustawienie jej dla wideo: Brak efektu, stosunek 4: 3 pozostaje, bez zmiany wielkości.

Czy ktoś wie, jak to zrobić?

EDYTOWANIE: Dzięki Gaurav za tę bardzo szczegółową odpowiedź. Wygląda dobrze, chciałbym, żeby to działało dla mnie.

.parentDiv // Results in around 400x400 pixels for me 
{ 
    position: absolute; 
    top: 11px; 
    right: 10px; 
    left: 10px; 
    height: -webkit-calc(50% - 18px); 
    height: calc(50% - 18px); 
    display: block; 
} 

Mój element wideo jest tam, podałem mu rozwiązanie CSS. Niestety stało się białe. Czy mój parentDiv css może mieć z tym coś wspólnego?

EDIT 2: Oto HTML:

<div class="parentDiv"> 
    <video class="cam_video" autoplay></video>      
</div> 

To głównie ona. Atrybut src wideo jest ustawiony na mój strumień kamery internetowej.

EDIT 3:

Gdybym prawym przyciskiem myszy i skontrolować biały (teraz czerwony nabazgrał) udział w tym zrzucie http://s22.postimg.org/th4ha8nmp/ratio2.png, Chrome pokazuje mi, że biały należy również do strumienia.

Wygląda na to, że strumień kamery pochodzi z białymi paskami u góry iu dołu. To jest ... denerwujące.

Answer 1

1) CSS tylko

Demo

HTML

<div class="wrapper"> 
    <video class="videoInsert"> 
    <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4"> 
    <source src="movie.ogg" type="video/ogg"> 
    Your browser does not support the video tag. 
</video> 
</div> 

css

.videoInsert { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -100; 
    background-size: cover; 
    overflow: hidden; 
} 

2) jQuery

Demo

HTML

<div id="video-viewport"> 
    <video autoplay preload width="640" height="360"> 
     <source src="https://s3.amazonaws.com/whiteboard.is/videos/bg-loop-new.mp4" /> 
    </video> 
</div> 

CSS

#video-viewport { 
    position: absolute; 
    top: 0; 
    left:0; 
    overflow: hidden; 
    z-index: -1; /* for accessing the video by click */ 
} 
body{ 
    margin:0; 
} 

jQuery

z tej odpowiedzi - simulate background-size:cover on <video> or <img>

var min_w = 300; // minimum video width allowed 
var vid_w_orig; // original video dimensions 
var vid_h_orig; 

jQuery(function() { // runs after DOM has loaded 

    vid_w_orig = parseInt(jQuery('video').attr('width')); 
    vid_h_orig = parseInt(jQuery('video').attr('height')); 
    $('#debug').append("<p>DOM loaded</p>"); 

    jQuery(window).resize(function() { resizeToCover(); }); 
    jQuery(window).trigger('resize'); 
}); 

function resizeToCover() { 

    // set the video viewport to the window size 
    jQuery('#video-viewport').width(jQuery(window).width()); 
    jQuery('#video-viewport').height(jQuery(window).height()); 

    // use largest scale factor of horizontal/vertical 
    var scale_h = jQuery(window).width()/vid_w_orig; 
    var scale_v = jQuery(window).height()/vid_h_orig; 
    var scale = scale_h > scale_v ? scale_h : scale_v; 

    // don't allow scaled width < minimum video width 
    if (scale * vid_w_orig < min_w) {scale = min_w/vid_w_orig;}; 

    // now scale the video 
    jQuery('video').width(scale * vid_w_orig); 
    jQuery('video').height(scale * vid_h_orig); 
    // and center it by scrolling the video viewport 
    jQuery('#video-viewport').scrollLeft((jQuery('video').width() - jQuery(window).width())/2); 
    jQuery('#video-viewport').scrollTop((jQuery('video').height() - jQuery(window).height())/2); 
}; 

3) za pomocą iframe css tylko

Demo

HTML

<div class="wrapper"> 
    <div class="h_iframe"> 
     <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe> 
    </div> 
</div> 

css

.h_iframe iframe { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
} 

Answer 2

Można użyć właściwości obiektu-fit rozwiązać ten problem. HTML:

<div class="parentDiv"> 
    <video class="cam_video" autoplay></video>      
</div> 

CSS:

.cam_video { 
object-fit: fill; 
} 

To pozwoliłoby na odcinku wideo zajmują całą nadrzędnego div.