发表新帖
发表新帖

Video 100% width and height

后端 未结
关注
13 1992
Happy的楠姐
Happy的楠姐 2020-12-08 06:37

I have a video, and I want it to FILL 100% of the width, and 100% of the height. And keep the aspect ratio.

Is it possible that it at least fills 100% for both? And

相关标签:
13条回答
  • 天涯浪人
    2020-12-08 06:57

    You can use Javascript to dynamically set the height to 100% of the window and then center it using a negative left margin based on the ratio of video width to window width.

    http://jsfiddle.net/RfV5C/

    var $video  = $('video'),
    $window = $(window); 

$(window).resize(function(){
    var height = $window.height();
    $video.css('height', height);

    var videoWidth = $video.width(),
        windowWidth = $window.width(),
    marginLeftAdjust =   (windowWidth - videoWidth) / 2;

    $video.css({
        'height': height, 
        'marginLeft' : marginLeftAdjust
    });
}).resize();
    0 讨论(0)
  • 梦如初夏
    2020-12-08 06:57

    By checking other answers, I used object-fit in CSS:

    video {
    object-fit: fill;
}

    From MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit):

    The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

    Value: fill

    The replaced content is sized to fill the element’s content box: the object’s concrete object size is the element’s used width and height.

    0 讨论(0)
  • 北海茫月
    2020-12-08 06:58

    use this css for height

    height: calc(100vh) !important;

    This will make the video to have 100% vertical height available.

    0 讨论(0)
  • 南笙
    2020-12-08 07:07

    Easiest & Responsive.

    <body>
  <video src="full.mp4" autoplay muted loop></video>
</body>
video {
  height: 100vh;
  width: 100%;
  object-fit: fill;
  position: absolute;
}
    0 讨论(0)
  • 一个人的身影
    2020-12-08 07:12 
    video {
  width: 100%    !important;
  height: auto   !important;
}

    Take a look here http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

    0 讨论(0)
  • 忘了有多久
    2020-12-08 07:12

    This works for me for video in a div container.

    .videoContainer 
{
    position:absolute;
    height:100%;
    width:100%;
    overflow: hidden;
}

.videoContainer video 
{
    min-width: 100%;
    min-height: 100%;
}

    Reference: http://www.codesynthesis.co.uk/tutorials/html-5-full-screen-and-responsive-videos

    0 讨论(0)
 看不清?
提交回复
热议问题