Question

我不知道这是否可行。我想在顶部标题部分播放背景视频（不是正文背景视频）。我的视频没有100％扩展。

此外，我想要一个静态横幅，你在访问网站时看到的第一件事，然后转换（某种淡入淡出）到背景视频。

<style>
    /* The only rule that matters */
    #video-background {
        /*  making the video fullscreen  */
        position:fixed;
        /*  bottom: 0;*/
        /* min-width: 100%; 
        min-height: 100%;*/
        /*width:auto; 
        height: auto;*/
        z-index: -100;
        left:0;
        float:left;
        top:0;
        width:1920px;
    }
</style>

<video autoplay loop id="video-background" muted style="background:red; height:500px;">
    <source src="https://s3.amazonaws.com/clientevents/FIPPUK001-HMNHDF76C7D/video/Fipp_Congress_2.mp4" type="video/mp4" align="left">
</video>

我不知道怎么能这样做。是否有任何示例或提示可以完成这项工作？

感谢。

Answer 1

使用video {object-fit: fill;}填充视频的原始尺寸。

Answer 2

您将高度设置为500px，因此宽度将按照该高度的比例设置。如果移除高度，它将全宽，但高度也会缩放。

如果你想将高度固定为500px，你可以添加一个溢出设置为隐藏的容器，但你会丢失一些视频。

以下是使用jQuery进行横幅淡化的示例

<style>
    #video-background {
        /*  making the video fullscreen  */
        position:fixed;
        z-index: -100;
        left:0;
        float:left;
        top:0;
        width:1920px;
        height: 500px;
        overflow: hidden;
    }
    .banner{
        position: absolute;
        top: 0;
        width: 100%;
        height: 500px;
        background: blue;
    }
</style>

<div id="video-background">
    <div class="banner">
        <h1>Hello World</h1>
    </div>
    <video autoplay loop muted style="background:red; width: 100%;">
      <source src="https://s3.amazonaws.com/clientevents/FIPPUK001-HMNHDF76C7D/video/Fipp_Congress_2.mp4" type="video/mp4" align="left">
    </video>
</div>

<script>
    $(function(){
        setTimeout(function(){
            $(".banner").fadeOut();
        }, 500);
    });
</script>

Answer 3

请检查此代码： -

<div id="video-background">
<video autoplay loop muted style="background:red; width: 100%;">
  <source src="https://s3.amazonaws.com/clientevents/FIPPUK001-HMNHDF76C7D/video/Fipp_Congress_2.mp4" type="video/mp4" align="left">
</video>
</div>

点击此处： - https://jsfiddle.net/v6oo5eh5/2/

Answer 4

 max-width: 1920px;
 width: 100%;
 object-fit: cover;

您可以在设置object-fit: cover;和max-width

时使用width

https://jsfiddle.net/v6oo5eh5/6/

html5视频宽度不扩展100％

4 个答案: