HTML 视频标签在 IE 中只显示一半的视频
HTML Video tag just shows half the video in IE
我一直在做一个项目，我必须在其中完全复制 https://www.google.com/atap/project-jacquard/
我用来播放背景视频的视频标签，在 Internet Explorer 中只显示一半，但在其他浏览器中工作正常。如果我有 IE，版本是 11.0 。以下为截图
我很努力，但不能准确指出我哪里出错了。如果有人能帮我找出我的错误，我将不胜感激...
此外，页脚没有响应。
这是我的全部代码 ->
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Project Jacquard</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Karla:400,700,400italic,700italic" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/one-page-wonder.css" rel="stylesheet">
<link href="css/yes.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<img id="img1" src="img/jacquard-row.svg" alt="Project Jacquard" class="ri" style=""><!-- width:22.5%; -->
</div>
</div>
<!-- /.container -->
</nav>
<header class="header-image">
<div class="headline" style="height: 850px;">
<div class="container" id="content">
<h2 style="padding-bottom: 20px;">Technology woven in.</h2>
<button class="centerButton">Play Film</button>
</div>
<video class="vid" autoplay loop controls muted> <!-- id="bgvid" style="width:1349; height:600;" -->
<source src="video/Jacquard.mp4" type="video/mp4">
<img id="alternative" src="alternative.jpg" />
</video>
<iframe style="margin-top: 60px;" class="vid" id="yt" src="https://www.youtube.com/embed/qObSFfdfe7I" frameborder="0" allowfullscreen></iframe>
</div>
</header>
<!-- Page Content -->
<div class="container">
<!-- Second Featurette -->
<div class="featurette" id="services">
<h2 style="text-align: center; padding-bottom: 50px;">Introducing Project Jacquard</h2>
<img class="featurette-image img-responsive pull-left" src="img/1.jpg" style="padding-right: 50px; padding-left: 50px; padding-bottom: 50px;">
<p class="lead" style="padding-right: 50px; padding-left: 50px;">Project Jacquard makes it possible to weave touch and gesture interactivity into any textile using standard, industrial looms.</p>
<br />
<p class="lead" style="padding-right: 50px; padding-left: 50px;">Everyday objects such as clothes and furniture can be transformed into interactive surfaces.</p>
</div>
<!-- Third Featurette -->
<div class="featurette" id="contact" style="padding-top: 50px;">
<h2 style="text-align: center; padding-bottom: 50px;"> Spinning conductive yarns</h2>
<img class="featurette-image img-responsive pull-right" src="img/2.jpg" style="padding-right: 50px; padding-left: 50px; padding-bottom: 50px;">
<p class="lead" style="padding-right: 50px; padding-left: 50px;">This is possible thanks to new conductive yarns, created in collaboration with our industrial partners.</p>
<br>
<p class="lead" style="padding-right: 50px; padding-left: 50px;">Jacquard yarn structures combine thin, metallic alloys with natural and synthetic yarns like cotton, polyester, or silk, making the yarn strong enough to be woven on any industrial loom.</p>
<br>
<p class="lead" style="padding-right: 50px; padding-left: 50px;">Jacquard yarns are indistinguishable from the traditional yarns that are used to produce fabrics today.</p>
</div>
<div class="featurette" id="services"></div>
<div class="featurette" id="services" style="padding-top: 50px;">
<h2 style="text-align: center; padding-bottom: 50px;">Weaving interactive textiles</h2>
<img class="featurette-image img-responsive pull-left" src="img/3.jpg" style="padding-right: 50px; padding-left: 50px; padding-bottom: 50px;">
<img class="featurette-image img-responsive pull-left" src="img/4.jpg" style="padding-right: 50px; padding-left: 50px; padding-bottom: 50px;">
<p class="lead" style="padding-right: 50px; padding-left: 50px;">Using conductive yarns, bespoke touch and gesture-sensitive areas can be woven at precise locations, anywhere on the textile.</p>
<br />
<p class="lead" style="padding-right: 50px; padding-left: 50px;">Alternatively, sensor grids can be woven throughout the textile, creating large, interactive surfaces.</p>
</div>
<div class="featurette" id="contact" style="padding-top: 50px;">
<h2 style="text-align: center; padding-bottom: 50px;"> Embedding electronics</h2>
<img class="featurette-image img-responsive pull-right" src="img/5.jpg" style="padding-right: 50px; padding-left: 50px; padding-bottom: 50px;">
<img class="featurette-image img-responsive pull-right" src="img/6.jpg" style="padding-right: 50px; padding-left: 50px; padding-bottom: 50px;">
<p class="lead" style="padding-right: 50px; padding-left: 50px;">The complementary components are engineered to be as discreet as possible. We developed innovative techniques to attach the conductive yarns to connectors and tiny circuits, no larger than the button on a jacket. These miniaturized electronics capture touch interactions, and various gestures can be inferred using machine-learning algorithms.</p>
<br>
<p class="lead" style="padding-right: 50px; padding-left: 50px;">Captured touch and gesture data is wirelessly transmitted to mobile phones or other devices to control a wide range of functions, connecting the user to online services, apps, or phone features.</p>
<br>
<p class="lead" style="padding-right: 50px; padding-left: 50px;">LEDs, haptics, and other embedded outputs provide feedback to the user, seamlessly connecting them to the digital world.</p>
</div>
<div class="featurette" id="services" style="padding-top: 50px;">
<h2 style="text-align: center; padding-bottom: 50px;">Producing at scale</h2>
<img class="featurette-image img-responsive pull-left" src="img/7.jpg" style="padding-right: 50px; padding-left: 50px; padding-bottom: 50px;">
<img class="featurette-image img-responsive pull-left" src="img/8.jpg" style="padding-right: 50px; padding-left: 50px; padding-bottom: 50px;">
<p class="lead" style="padding-right: 50px; padding-left: 50px;">Jacquard components are cost-efficient to produce, and the yarns and fabrics can be manufactured with standard equipment used in mills around the world.</p>
<br />
<p class="lead" style="padding-right: 50px; padding-left: 50px;">One loom can generate as many different textile designs as there are people on the planet. Now that same loom can also weave in interactivity.</p>
</div>
<div class="featurette" id="contact" style="padding-top: 50px;">
<h2 style="text-align: center; padding-bottom: 50px;"> Making connected clothing</h2>
<img class="featurette-image img-responsive pull-right" src="img/9.jpg" style="padding-right: 50px; padding-left: 50px; padding-bottom: 50px;">
<img class="featurette-image img-responsive pull-right" src="img/10.jpg" style="padding-right: 50px; padding-left: 50px; padding-bottom: 50px;">
<p class="lead" style="padding-right: 50px; padding-left: 50px;">Connected clothes offer new possibilities for interacting with services, devices, and environments. These interactions can be reconfigured at any time.</p>
<br>
<p class="lead" style="padding-right: 50px; padding-left: 50px;">Jacquard is a blank canvas for the fashion industry. Designers can use it as they would any fabric, adding new layers of functionality to their designs, without having to learn about electronics.</p>
<br>
<p class="lead" style="padding-right: 50px; padding-left: 50px;">Developers will be able to connect existing apps and services to Jacquard-enabled clothes and create new features specifically for the platform.</p>
<br>
<p class="lead" style="padding-right: 50px; padding-left: 50px;">We are also developing custom connectors, electronic components, communication protocols, and an ecosystem of simple applications and cloud services.</p>
</div>
<div class="featurette" id="services" style="padding-top: 50px;">
<h3 style="text-align: center; padding-bottom: 50px;">Project Jacquard will allow designers and <br> developers to build connected, touch-sensitive <br>textiles into their own products.</h3>
</div>
<div class="featurette" id="contact" style="padding-top: 50px;">
<img src="img/jacquard-row.svg" style="margin-right: auto; margin-left: auto; padding-bottom: 10px; display: block;">
<h4 style="text-align: center; padding-bottom: 50px;">Technology woven in.</h4>
</div>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12" style="padding-top: 50px; padding-bottom: 50px;">
<img src="img/googleATAP.svg" style=" padding-left: 80px; float: left; vertical-align: middle; padding-top:10px;">
<div class="left">
<ul style="padding-left: 60px;">
<li style="padding-top:20px;"><a href="https://www.google.com/intl/en/about/">About Google</a></li>
<li style="padding-left: 50px; padding-top:20px;"><a href="https://www.google.com/intl/en/policies/privacy/?fg=1">Privacy</a></li>
<li style="padding-left: 20px; padding-top:20px;"><a href="https://www.google.com/intl/en/policies/terms/regional.html">Terms</a></li>
</ul>
</div>
<div class="right">
<ul>
<li style="padding-right: 20px; padding-top:20px;">Follow Google ATAP:</li>
<li style="padding-right: 20px;"><a style="width: 40px;" href="https://plus.sandbox.google.com/+GoogleATAP/"><img src="img/gplus.svg"></a></li>
<li style="padding-right: 80px;"><a style="width: 40px;" href="https://www.youtube.com/user/GoogATAP"><img src="img/youtube.svg"></a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script>
$("button").click(function () {
$("#content").hide();
$("#yt")[0].src += "?autoplay=1";
setTimeout(function(){ $("#yt").show(); }, 200);
});
</script>
</body>
</html>
CSS 文件 1 ->
body {
-webkit-animation-delay: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-duration: 0.1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
overflow-x:hidden; }
/*video {display: block;}*/
@-webkit-keyframes fontfix {
from { opacity: 1; }
to { opacity: 1; } }
.navbar-inverse { background-color: #fff; }
.navbar { min-height: 82px; }
img.ri { position: absolute; max-width: 80%; top: 10%; left: 10%; border-radius: 3px; /*box-shadow: 0 3px 6px rgba(0,0,0,0.9);*/ }
img.ri:empty { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%,
-50%); transform: translate(-50%, -50%); }
video#bgvid { position: relative; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background-size: cover; }
.google-front-button{ border-radius: 0; border: 2px solid #fff; height: 50px; line-height: 44px; padding: 0 30px 2px; text-transform: none; transition: all .4s ease-in-out; }
.centerButton {
display: block;
height: 50px;
width: 145px;
background-color: rgba(255, 255, 255, 0);
border: 2px solid rgba(255, 255, 255, 0.9);
color: rgba(255, 255, 255, 0.9);
margin: 0px auto 0px auto;
text-align: center;
font: bold 1.2em/10px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
padding: 17px 10px;
transition: background-color 0.5s ease-in-out;
transition: border 0.5s ease-in-out;
} /* a.centerButton {
text-decoration: none; }
*/ a:hover { color: rgba(255, 255, 255, 0.9); }
a.centerButton:hover { text-decoration:none; background-color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.9); border: 2px solid rgba(255, 255, 255, 0.3); transition: background-color 0.5s ease-in-out;
transition: border 0.5s ease-in-out; }
.headline {
padding: 250px 0 1px 0; }
.headline h2 { font-family: "Karla",sans-serif;
font-size: 38px;
color: #fff;
/*background: #fff;*/
/*background: rgba(255,255,255,0.9);*/ }
h2{
font-family: "Karla",sans-serif;
font-size: 40px; }
.lead{
font-family: "Karla",sans-serif;
font-size: 17px;
color: #404040;
letter-spacing: 1px;
line-height: 35px;
font-weight: 300; }
.container { width: auto; /*1170px*/ }
#contact{
background-color: rgba(230,230,230,.8); }
h3{
font-family: "Karla",sans-serif;
font-size: 35px;
color: #676767; }
h4{
font-family: "Karla",sans-serif;
font-size: 17px;
color: black; }
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden; }
li{
float: left;
font-family: "Karla",sans-serif;
font-size: 16px; }
a {
font-family: "Karla",sans-serif;
font-size: 16px;
display: block;
width: 100px;
color:#676767; }
a:hover{
color:#676767;
text-decoration: underline; }
.left{
float: left; }
.right{
float: right; }
.vid {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
object-fit: cover;
z-index: -1;
position: absolute;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-size: cover; }
#yt {
display: none;
z-index: 1; }
#content { }
将您的代码与实际的 Project Jacquard 页面进行比较，您的 CSS 中似乎缺少一些样式。要抵消您的翻译，您需要：
left: 50%;
top: 50%;
注意：顶部定位可能不是必需的。 Project Jacquard 页面没有 Y 翻译，所以很难说。
好的，我自己通过玩代码找到了答案。我需要做的就是将此 'particular' 行添加到 .vid，用于 IE 翻译
-ms-transform: translateX(0%) translateY(-50%);
它在 IE 中也很好地覆盖了屏幕！希望它能帮助像我一样被困住的人！干杯！
我一直在做一个项目，我必须在其中完全复制 https://www.google.com/atap/project-jacquard/
我用来播放背景视频的视频标签，在 Internet Explorer 中只显示一半，但在其他浏览器中工作正常。如果我有 IE，版本是 11.0 。以下为截图
我很努力，但不能准确指出我哪里出错了。如果有人能帮我找出我的错误，我将不胜感激...
此外，页脚没有响应。
这是我的全部代码 ->
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Project Jacquard</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Karla:400,700,400italic,700italic" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/one-page-wonder.css" rel="stylesheet">
<link href="css/yes.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<img id="img1" src="img/jacquard-row.svg" alt="Project Jacquard" class="ri" style=""><!-- width:22.5%; -->
</div>
</div>
<!-- /.container -->
</nav>
<header class="header-image">
<div class="headline" style="height: 850px;">
<div class="container" id="content">
<h2 style="padding-bottom: 20px;">Technology woven in.</h2>
<button class="centerButton">Play Film</button>
</div>
<video class="vid" autoplay loop controls muted> <!-- id="bgvid" style="width:1349; height:600;" -->
<source src="video/Jacquard.mp4" type="video/mp4">
<img id="alternative" src="alternative.jpg" />
</video>
<iframe style="margin-top: 60px;" class="vid" id="yt" src="https://www.youtube.com/embed/qObSFfdfe7I" frameborder="0" allowfullscreen></iframe>
</div>
</header>
<!-- Page Content -->
<div class="container">
<!-- Second Featurette -->
<div class="featurette" id="services">
<h2 style="text-align: center; padding-bottom: 50px;">Introducing Project Jacquard</h2>
<img class="featurette-image img-responsive pull-left" src="img/1.jpg" style="padding-right: 50px; padding-left: 50px; padding-bottom: 50px;">
<p class="lead" style="padding-right: 50px; padding-left: 50px;">Project Jacquard makes it possible to weave touch and gesture interactivity into any textile using standard, industrial looms.</p>
<br />
<p class="lead" style="padding-right: 50px; padding-left: 50px;">Everyday objects such as clothes and furniture can be transformed into interactive surfaces.</p>
</div>
<!-- Third Featurette -->
<div class="featurette" id="contact" style="padding-top: 50px;">
<h2 style="text-align: center; padding-bottom: 50px;"> Spinning conductive yarns</h2>
<img class="featurette-image img-responsive pull-right" src="img/2.jpg" style="padding-right: 50px; padding-left: 50px; padding-bottom: 50px;">
<p class="lead" style="padding-right: 50px; padding-left: 50px;">This is possible thanks to new conductive yarns, created in collaboration with our industrial partners.</p>
<br>
<p class="lead" style="padding-right: 50px; padding-left: 50px;">Jacquard yarn structures combine thin, metallic alloys with natural and synthetic yarns like cotton, polyester, or silk, making the yarn strong enough to be woven on any industrial loom.</p>
<br>
<p class="lead" style="padding-right: 50px; padding-left: 50px;">Jacquard yarns are indistinguishable from the traditional yarns that are used to produce fabrics today.</p>
</div>
<div class="featurette" id="services"></div>
<div class="featurette" id="services" style="padding-top: 50px;">
<h2 style="text-align: center; padding-bottom: 50px;">Weaving interactive textiles</h2>
<img class="featurette-image img-responsive pull-left" src="img/3.jpg" style="padding-right: 50px; padding-left: 50px; padding-bottom: 50px;">
<img class="featurette-image img-responsive pull-left" src="img/4.jpg" style="padding-right: 50px; padding-left: 50px; padding-bottom: 50px;">
<p class="lead" style="padding-right: 50px; padding-left: 50px;">Using conductive yarns, bespoke touch and gesture-sensitive areas can be woven at precise locations, anywhere on the textile.</p>
<br />
<p class="lead" style="padding-right: 50px; padding-left: 50px;">Alternatively, sensor grids can be woven throughout the textile, creating large, interactive surfaces.</p>
</div>
<div class="featurette" id="contact" style="padding-top: 50px;">
<h2 style="text-align: center; padding-bottom: 50px;"> Embedding electronics</h2>
<img class="featurette-image img-responsive pull-right" src="img/5.jpg" style="padding-right: 50px; padding-left: 50px; padding-bottom: 50px;">
<img class="featurette-image img-responsive pull-right" src="img/6.jpg" style="padding-right: 50px; padding-left: 50px; padding-bottom: 50px;">
<p class="lead" style="padding-right: 50px; padding-left: 50px;">The complementary components are engineered to be as discreet as possible. We developed innovative techniques to attach the conductive yarns to connectors and tiny circuits, no larger than the button on a jacket. These miniaturized electronics capture touch interactions, and various gestures can be inferred using machine-learning algorithms.</p>
<br>
<p class="lead" style="padding-right: 50px; padding-left: 50px;">Captured touch and gesture data is wirelessly transmitted to mobile phones or other devices to control a wide range of functions, connecting the user to online services, apps, or phone features.</p>
<br>
<p class="lead" style="padding-right: 50px; padding-left: 50px;">LEDs, haptics, and other embedded outputs provide feedback to the user, seamlessly connecting them to the digital world.</p>
</div>
<div class="featurette" id="services" style="padding-top: 50px;">
<h2 style="text-align: center; padding-bottom: 50px;">Producing at scale</h2>
<img class="featurette-image img-responsive pull-left" src="img/7.jpg" style="padding-right: 50px; padding-left: 50px; padding-bottom: 50px;">
<img class="featurette-image img-responsive pull-left" src="img/8.jpg" style="padding-right: 50px; padding-left: 50px; padding-bottom: 50px;">
<p class="lead" style="padding-right: 50px; padding-left: 50px;">Jacquard components are cost-efficient to produce, and the yarns and fabrics can be manufactured with standard equipment used in mills around the world.</p>
<br />
<p class="lead" style="padding-right: 50px; padding-left: 50px;">One loom can generate as many different textile designs as there are people on the planet. Now that same loom can also weave in interactivity.</p>
</div>
<div class="featurette" id="contact" style="padding-top: 50px;">
<h2 style="text-align: center; padding-bottom: 50px;"> Making connected clothing</h2>
<img class="featurette-image img-responsive pull-right" src="img/9.jpg" style="padding-right: 50px; padding-left: 50px; padding-bottom: 50px;">
<img class="featurette-image img-responsive pull-right" src="img/10.jpg" style="padding-right: 50px; padding-left: 50px; padding-bottom: 50px;">
<p class="lead" style="padding-right: 50px; padding-left: 50px;">Connected clothes offer new possibilities for interacting with services, devices, and environments. These interactions can be reconfigured at any time.</p>
<br>
<p class="lead" style="padding-right: 50px; padding-left: 50px;">Jacquard is a blank canvas for the fashion industry. Designers can use it as they would any fabric, adding new layers of functionality to their designs, without having to learn about electronics.</p>
<br>
<p class="lead" style="padding-right: 50px; padding-left: 50px;">Developers will be able to connect existing apps and services to Jacquard-enabled clothes and create new features specifically for the platform.</p>
<br>
<p class="lead" style="padding-right: 50px; padding-left: 50px;">We are also developing custom connectors, electronic components, communication protocols, and an ecosystem of simple applications and cloud services.</p>
</div>
<div class="featurette" id="services" style="padding-top: 50px;">
<h3 style="text-align: center; padding-bottom: 50px;">Project Jacquard will allow designers and <br> developers to build connected, touch-sensitive <br>textiles into their own products.</h3>
</div>
<div class="featurette" id="contact" style="padding-top: 50px;">
<img src="img/jacquard-row.svg" style="margin-right: auto; margin-left: auto; padding-bottom: 10px; display: block;">
<h4 style="text-align: center; padding-bottom: 50px;">Technology woven in.</h4>
</div>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12" style="padding-top: 50px; padding-bottom: 50px;">
<img src="img/googleATAP.svg" style=" padding-left: 80px; float: left; vertical-align: middle; padding-top:10px;">
<div class="left">
<ul style="padding-left: 60px;">
<li style="padding-top:20px;"><a href="https://www.google.com/intl/en/about/">About Google</a></li>
<li style="padding-left: 50px; padding-top:20px;"><a href="https://www.google.com/intl/en/policies/privacy/?fg=1">Privacy</a></li>
<li style="padding-left: 20px; padding-top:20px;"><a href="https://www.google.com/intl/en/policies/terms/regional.html">Terms</a></li>
</ul>
</div>
<div class="right">
<ul>
<li style="padding-right: 20px; padding-top:20px;">Follow Google ATAP:</li>
<li style="padding-right: 20px;"><a style="width: 40px;" href="https://plus.sandbox.google.com/+GoogleATAP/"><img src="img/gplus.svg"></a></li>
<li style="padding-right: 80px;"><a style="width: 40px;" href="https://www.youtube.com/user/GoogATAP"><img src="img/youtube.svg"></a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script>
$("button").click(function () {
$("#content").hide();
$("#yt")[0].src += "?autoplay=1";
setTimeout(function(){ $("#yt").show(); }, 200);
});
</script>
</body>
</html>
CSS 文件 1 ->
body {
-webkit-animation-delay: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-duration: 0.1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
overflow-x:hidden; }
/*video {display: block;}*/
@-webkit-keyframes fontfix {
from { opacity: 1; }
to { opacity: 1; } }
.navbar-inverse { background-color: #fff; }
.navbar { min-height: 82px; }
img.ri { position: absolute; max-width: 80%; top: 10%; left: 10%; border-radius: 3px; /*box-shadow: 0 3px 6px rgba(0,0,0,0.9);*/ }
img.ri:empty { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%,
-50%); transform: translate(-50%, -50%); }
video#bgvid { position: relative; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background-size: cover; }
.google-front-button{ border-radius: 0; border: 2px solid #fff; height: 50px; line-height: 44px; padding: 0 30px 2px; text-transform: none; transition: all .4s ease-in-out; }
.centerButton {
display: block;
height: 50px;
width: 145px;
background-color: rgba(255, 255, 255, 0);
border: 2px solid rgba(255, 255, 255, 0.9);
color: rgba(255, 255, 255, 0.9);
margin: 0px auto 0px auto;
text-align: center;
font: bold 1.2em/10px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
padding: 17px 10px;
transition: background-color 0.5s ease-in-out;
transition: border 0.5s ease-in-out;
} /* a.centerButton {
text-decoration: none; }
*/ a:hover { color: rgba(255, 255, 255, 0.9); }
a.centerButton:hover { text-decoration:none; background-color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.9); border: 2px solid rgba(255, 255, 255, 0.3); transition: background-color 0.5s ease-in-out;
transition: border 0.5s ease-in-out; }
.headline {
padding: 250px 0 1px 0; }
.headline h2 { font-family: "Karla",sans-serif;
font-size: 38px;
color: #fff;
/*background: #fff;*/
/*background: rgba(255,255,255,0.9);*/ }
h2{
font-family: "Karla",sans-serif;
font-size: 40px; }
.lead{
font-family: "Karla",sans-serif;
font-size: 17px;
color: #404040;
letter-spacing: 1px;
line-height: 35px;
font-weight: 300; }
.container { width: auto; /*1170px*/ }
#contact{
background-color: rgba(230,230,230,.8); }
h3{
font-family: "Karla",sans-serif;
font-size: 35px;
color: #676767; }
h4{
font-family: "Karla",sans-serif;
font-size: 17px;
color: black; }
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden; }
li{
float: left;
font-family: "Karla",sans-serif;
font-size: 16px; }
a {
font-family: "Karla",sans-serif;
font-size: 16px;
display: block;
width: 100px;
color:#676767; }
a:hover{
color:#676767;
text-decoration: underline; }
.left{
float: left; }
.right{
float: right; }
.vid {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
object-fit: cover;
z-index: -1;
position: absolute;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-size: cover; }
#yt {
display: none;
z-index: 1; }
#content { }
将您的代码与实际的 Project Jacquard 页面进行比较，您的 CSS 中似乎缺少一些样式。要抵消您的翻译，您需要：
left: 50%;
top: 50%;
注意：顶部定位可能不是必需的。 Project Jacquard 页面没有 Y 翻译，所以很难说。
好的，我自己通过玩代码找到了答案。我需要做的就是将此 'particular' 行添加到 .vid，用于 IE 翻译
-ms-transform: translateX(0%) translateY(-50%);
它在 IE 中也很好地覆盖了屏幕！希望它能帮助像我一样被困住的人！干杯！