web-dev-qa-db-fra.com

Redimensionner l'élément <video> en div parent

Quelqu'un a-t-il réussi à redimensionner un élément video en div parent?

Mon élément vidéo contient un flux webcam qui vient avec un ratio of 4:3. Je voudrais casser le rapport et l'ajuster à la taille div. J'ai essayé ce qui suit:

  • Ensemble width and height 100%> cela ne fait rien, 4: 3 reste
  • Ensemble min-height and min-width 100%> cela fait redimensionner la vidéo à quelque chose de vraiment énorme qui déborde le div
  • position:absolute, bottom, top, left and right: 0px aussi un énorme flux sur la div parent
  • Utiliser javascript pour obtenir la hauteur et la largeur des divs parents, puis les configurer pour la vidéo: aucun effet, le rapport 4: 3 reste, pas de changement de taille.

Comment faire?

[~ # ~] modifier [~ # ~] : Merci Gaurav pour cette réponse très détaillée. Il a l'air bien, je souhaite que cela fonctionne pour moi.

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

Mon élément vidéo est là, je lui ai donné votre solution CSS. Malheureusement, il est seulement devenu blanc. Mon parentDiv css pourrait-il avoir quelque chose à voir avec cela?

EDIT 2 : Voici le HTML:

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

C'est principalement ça. L'attribut src de la vidéo est défini sur mon flux webcam.

EDIT 3 :

Si je clique avec le bouton droit de la souris et inspecte la partie blanche (maintenant rouge griffonnée) de cette capture d'écran https://s22.postimg.cc/th4ha8nmp/ratio2.png , Chrome = me montre que le blanc appartient aussi au flux.

Il semble que le flux de la webcam s'accompagne de rayures blanches en haut et en bas. C'est énervant.

csshtml5video
24
spacecoyote

1) CSS uniquement

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

de cette réponse - simuler la taille de l'arrière-plan: couvrir sur <video> ou <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) en utilisant uniquement iframe css

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%;
}
24
4dgaurav

Vous pouvez utiliser la propriété fit-fit pour résoudre ce problème. HTML:

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

CSS:

.cam_video {
object-fit: fill;
}

Cela ferait étirer la vidéo pour occuper la division parent entière.

7
lightbringer
 object-fit: cover;

Cela a fait l'affaire pour moi.

1
albiesoft.com