Photoshop Question posted in
The official user guide can be found here.

Iframe no controls work and video doesn't play – Photoshop

I just copied and pasted the iframe tag that youtube gave me(my friend is using the same video and his worked fine) and it is like it is just a screenshot of the video, none of the controls work and the video does not play, this also happens if I just use the video tag but then I decided I would rather use this instead anyway. I have tried it in brackets live editor, locally on chrome, edge, and firefox and hosting it on my actual website: http://lucasjohnson.tech (don’t mind the images they are just placeholders for now). Here is the code:

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>

If you need any more information please let me know Thank you.

Tags:

2

Answers


  1. 0

    The problem is that u assigned to the parent element #body z-index: -1, this make the element (and all the child) unclickable, so jsut change this

    #body{
    padding-top: 200px;
    position: relative;
    margin-left: 13.5%;
     z-index: -1;
}

    to this 

    #body{
    padding-top: 200px;
    position: relative;
    margin-left: 13.5%;
}
    Login or Signup to reply.
  2. 0

    You need to delete the following css line from body css.

    z-index: -1;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search