Question

我正在尝试在页面顶部插入背景循环视频。（不是整个页面。只是它的上部像一个封面视频。）但是我无法使其完全适合窗口。

html代码

    <!DOCTYPE html>
    <html>

        <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title> </title> 
        <link rel="stylesheet" href="Styles.css" type="text/css">
        </head>

        <body>

        <nav>
        <div>
        <ul>
         <li  id="logo"> <img src="logo.JPEG" width="100" height="25"> </li>
         <li> <a href="index.html" class="active">  Home  </a> </li>
         <li> <a href="#"> Categories </a> </li>
         <li> <a href="#"> Quiz </a> </li>
         <li> <a href="#"> Buy Products </a> </li>
         <li> <a href="#"> Our Details </a> </li>
         </ul>
        </div>
        </nav>

        <video autoplay muted loop>
        <source src="video.mp4" type="video/mp4">
        </video>

css代码

    body {
        margin: 0;
        background-color: #111110  ;
    }

    nav{
      text-align: right;
      background-color: black;
      top: 0;
      overflow:hidden; 
    }

    nav ul li {
      display: inline-block;
    }

    a {
      padding:15px;
      font-family: "Open Sans";
      text-transform:uppercase;
      color: white;
      font-size: 15px;
      text-decoration: none;
    }

    a:hover {
      background: yellow;
      color: black;
    }

    .active{
        background-color:#B3B6B7;
    }

    #logo{
        float: left;
    }

    video{
      width:70%;
      transform: translate(0%,0%);
      overflow: hidden;
    }

这是我到目前为止获得的代码。有人可以告诉我如何正确调整此视频。我为该视频指定的高度是正确的，但是我无法拉伸它。

Answer 1

尝试不带任何CSS的视频HTML属性： https://www.w3schools.com/tags/att_video_height.asp

Answer 2

尝试一下

<video width="320" height="240" controls poster="/video/wind-8a1cd93f.png" id="styled_video" muted preload="metadata" loop> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>

您还可以设置视频元素styled_video的样式。

希望这有助于回答您的问题

如何根据特定尺寸调整视频？

2 个答案: