Изменение размера элемента <video> на родительский div

Кто-нибудь смог успешно изменить размер элемента video на родительский div?

Мой элемент видео содержит поток веб-камеры, который входит с ratio of 4:3. Я хотел бы разорвать коэффициент и настроить его на размер div. Я пробовал следующее:

  • Установить width and height 100% > , это ничего не делает, осталось 4: 3
  • Установить min-height and min-width 100% > , это приводит к изменению размера видео до действительно огромного, что переполняет div
  • position:absolute, bottom, top, left and right: 0px также огромный поток над родительским div
  • Использование javascript для получения высоты и ширины родительских div, а затем установки для видео: Отсутствие эффекта, соотношение 4: 3 остается без изменения размера.

Итак, кто-нибудь знает, как это сделать?

EDIT. Благодарим Гаурава за подробный ответ. Это выглядит хорошо, мне жаль, что это не сработает для меня.

.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;
}

Мой элемент видео находится там, я дал ему ваше решение CSS. К сожалению, он только стал белым. Может ли мой parentDiv css иметь какое-либо отношение к этому?

EDIT 2: здесь HTML:

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

Это в основном это. Атрибут src для видео устанавливается в мой поток веб-камеры.

РЕДАКТИРОВАТЬ 3:

Если я щелкнул правой кнопкой мыши и проверил в этом скриншоте http://s22.postimg.org/th4ha8nmp/ratio2.png белую (теперь красную надпись), Chrome показывает мне, что белый также принадлежит потоку.

Кажется, что поток веб-камеры встречается с белыми полосками сверху и снизу. Это... раздражает.

Ответы

Ответ 1

1) Только CSS

Демо

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

Демо

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

из этого ответа - имитирует размер фона: обложка на <video> или <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), используя только iframe css

Демо

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%;
}

Ответ 2

Вы можете использовать свойство object-fit, чтобы решить эту проблему. HTML:

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

CSS

.cam_video {
object-fit: fill;
}

Это заставит видео растягиваться, чтобы занять весь родительский div.