Css 如何根据特定大小调整视频？
我试图在页面顶部插入一个背景循环视频。（不是整页，只是像封面视频一样的上半部分。）但我无法使它与窗口正确匹配 html代码Css 如何根据特定大小调整视频？,css,html,html5-video,Css,Html,Html5 Video,我试图在页面顶部插入一个背景循环视频。（不是整页，只是像封面视频一样的上半部分。）但我无法使它与窗口正确匹配 html代码 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> </title>
<!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>
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;
}
这是我目前掌握的密码。有人能告诉我如何正确调整此视频。我为此视频指定的高度是正确的，但拉伸时遇到问题。尝试不带任何CSS的视频HTML属性： 试试这个
您的浏览器不支持视频标记。
希望这有助于回答您的问题这不是我需要的…我需要的是一个背景循环封面视频。。。