Question

我只是复制并粘贴了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 &#9679;</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>

如果您需要更多信息，请让我知道。

Answer 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%;
}

Answer 2

您需要从正文CSS中删除以下CSS行。

z-index: -1;

iframe无法正常工作且视频无法播放

2 个答案: