我只是复制并粘贴了youtube给我的iframe标签(我的朋友使用的是同一视频,他的工作正常),就像它只是该视频的屏幕截图,没有任何控件起作用,该视频确实不播放,如果我只是使用video标签,也会发生这种情况,但后来我决定还是宁愿使用它。我已经在括号实时编辑器中进行了尝试,在本地chrome,edge和firefox上进行了尝试,并将其托管在我的实际网站上:http://lucasjohnson.tech(现在不要介意它们只是占位符)。这是代码:
a {
text-decoration: none;
color: white;
}
body{
margin: 0px;
background-image: url(bg.jpg);
}
/*Header*/
#header h1{
margin: 0;
padding: 0;
color: white;
padding-right: 20px;
}
#header{
margin-left: 13.5%;
background-color: #34486b;
text-align: right;
width: 86.5%;
height: 74px;
padding-top:34px;
font-family: "roboto", sans-serif;
position: fixed;
}
/*Nav*/
#logo {
width:13.5%;
height: 108px;
position: fixed
}
nav {
margin-top: 108px;
width: 13.5%;
float: left;
font-family: "roboto", sans-serif;
background-color: #111934 ;
height: 100vh;
position: fixed;
}
nav li {
list-style: none;
}
/*Body*/
#body{
padding-top: 200px;
position: relative;
margin-left: 13.5%;
z-index: -1;
}
#body img{
margin-left: auto;
margin-right: auto;
display:block;
background-color: transparent;
}
#body h1{
text-align: center;
font-family: "roboto", sans-serif;
}
#body h2{
text-align: center;
font-family: "roboto", sans-serif;
}
#body h3{
text-align: center;
font-family: "roboto", sans-serif;
}
/*Adobe*/
#adobeLogo{
height: 180px;
}
#photoshop{
height: 400px;
}
#psHeader{
margin-top: 100px;
margin-bottom: 0px;
}
#before{
margin-top: 0px;
margin-bottom: 5px;
display: inline-block;
margin-left: 34%;
}
#after{
margin-top: 0px;
margin-bottom: 5px;
display: inline-block;
float: right;
margin-right: 34%;
}
.adobeImg {
visibility: hidden;
margin-bottom: 100px;
}
.fadeIn {
-webkit-animation: animat_show 0.8s;
animation: animat_show 0.8s;
visibility: visible !important;
}
@-webkit-keyframes animat_show{
0%{opacity:0}
100%{opacity:1}
}
iframe{
margin-left:13.5%;
margin-right:auto;
margin-top: 0px;
}
#head {
margin-top: 10%;
margin-bottom: 40%;
}
#arrow{
height: 20px;
margin-top: 25%
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<img id="logo" src="logo.png">
<nav>
<li>
<ul><a href="index.html">Home ●</a></ul>
<ul><a href="adobe.html">Adobe</a></ul>
<ul><a href="cert.html">Certifications</a></ul>
<ul><a href="hw.html">Hardware</a></ul>
<ul><a href="office.html">Office</a></ul>
<ul><a href="personal.html">Personal</a></ul>
<ul><a href="programming.html">Programming</a></ul>
<ul><a href="contact.html">Contact</a></ul>
</li>
</nav>
<div id = "header">
<h1>
Lucas Johnson Port-a-fortress
</h1>
</div>
<div id = "body">
<img src = "lucas%20scott%20johnson%20living%20at%2024%20brookfield%20drive%20northfield%20drive%20profile%20picture.png">
<h1>Lucas Johnson</h1>
<h3>Programmer and IT Proffesional</h3>
<iframe width="560" height="315" src="https://www.youtube.com/embed/uRvTDuMEfKU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</body>
</html>
如果您需要更多信息,请让我知道。
答案 0 :(得分:1)
问题是,您将u分配给了父元素#body
z-index: -1
,这使得该元素(以及所有子元素)不可点击,因此jsut对此进行了更改
#body{
padding-top: 200px;
position: relative;
margin-left: 13.5%;
z-index: -1;
}
对此
#body{
padding-top: 200px;
position: relative;
margin-left: 13.5%;
}
答案 1 :(得分:0)
您需要从正文CSS中删除以下CSS行。
z-index: -1;