Why is my iframe Youtube video not clickable? - html

Question

I had an iframe element inside a div working just fine. I wanted to resize the iframe video but I couldn't centre it, so I added another div to contain both the div and the iframe. And after doing this, you couldn't click the video anymore.
Here's the chunk of code regarding this problem. As you will see, I already tried setting z-index values and pointer-events: none;.
#botNavBar {
height: auto;
padding-top: 50px;
padding-bottom: 100px;
padding-left: 150px;
padding-right: 150px;
position: relative;
background: black;
display: flex;
flex-direction: column;
z-index: -1;
align-items: center;
}
#videoResizer {
width: 60%;
z-index: 2;
pointer-events: none;
}
#videoContainer {
width: 100%;
position: relative;
padding-bottom: 56.25%;
align-items: center;
justify-content: center;
text-align: center;
z-index: 2;
pointer-events: none;
}
#trailerTwogether {
position: absolute;
display: block;
width: 100%;
height: 100%;
border-style: none;
z-index: 200000000000000;
}
#leftSide {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
#contactInfo {
Font-Family: 'Raleway', Sans-Serif;
Font-Size: 16px;
color: rgb(214, 234, 248);
margin-bottom: 0px;
padding-top: 50px;
}
#contactMail {
Font-Family: 'Raleway', Sans-Serif;
Font-Size: 16px;
color: darkmagenta;
margin-bottom: 0px;
padding-top: 0px;
margin-top: 0px;
}
<div id="botNavBar">
<div id="videoResizer">
<div id="videoContainer">
<iframe id="trailerTwogether" src="https://www.youtube.com/embed/7VjyXe_d57E"> </iframe>
</div>
</div>
<div id="leftSide">
<p id=contactInfo>
Desarrollado por <b>Flaming Llama Games</b> para <b>PS4</b>
<br>
Lanzamiento: finales <b>2021</b>
</p>
<p id="contactMail">
contacto#flamingllamagames.com
</p>
</div>
</div>
https://jsfiddle.net/Als3rr/e7kqv4wd/

Answer 1

I removed the styles by adding 1 in id in all 3 divs of iframe.
I have added inline style for iframe
I have added "padding-top:100px;" for #leftSide
It worked fine [https://i.stack.imgur.com/O9BUt.png][1]
#leftSide {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
padding-top:100px;
}
<div id="botNavBar1">
<div id="videoResizer1">
<div id="videoContainer1">
<iframe id="trailerTwogether" src="https://www.youtube.com/embed/7VjyXe_d57E" style="height:20%; width:20%"> </iframe>
</div>
</div>
<div id="leftSide">
<p id=contactInfo>
Desarrollado por <b>Flaming Llama Games</b> para <b>PS4</b>
<br>
Lanzamiento: finales <b>2021</b>
</p>
<p id="contactMail">
contacto#flamingllamagames.com
</p>
</div>
</div>

Answer 2

The main issue is that you have a z-index: -1; on the top level element (#botNavBar). This puts this div "behind" the body.
Also the pointer-events: none; you have added in an attempt to solve the issue are unfortunately causing it in another way, so those also need to be removed.
Other small issues:
Font-Family and Font-Size should be all lower-case
This snippet won't display the issue here as the iframe is blocked inside a StackOverflow snippet, but it will work in a real enviroment.
#botNavBar {
height: auto;
padding-top: 50px;
padding-bottom: 100px;
padding-left: 150px;
padding-right: 150px;
position: relative;
background: black;
display: flex;
flex-direction: column;
align-items: center;
}
#videoResizer {
width: 60%;
z-index: 2;
}
#videoContainer {
width: 100%;
position: relative;
padding-bottom: 56.25%;
align-items: center;
justify-content: center;
text-align: center;
z-index: 2;
}
#trailerTwogether {
position: absolute;
display: block;
width: 100%;
height: 100%;
border-style: none;
z-index: 200000000000000;
}
#leftSide {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
#contactInfo {
font-family: 'Raleway', Sans-Serif;
font-size: 16px;
color: rgb(214, 234, 248);
margin-bottom: 0px;
padding-top: 50px;
}
#contactMail {
font-family: 'Raleway', Sans-Serif;
font-size: 16px;
color: darkmagenta;
margin-bottom: 0px;
padding-top: 0px;
margin-top: 0px;
}
<div id="botNavBar">
<div id="videoResizer">
<div id="videoContainer">
<iframe id="trailerTwogether" src="https://www.youtube.com/embed/7VjyXe_d57E"> </iframe>
</div>
</div>
<div id="leftSide">
<p id=contactInfo>
Desarrollado por <b>Flaming Llama Games</b> para <b>PS4</b>
<br> Lanzamiento: finales <b>2021</b>
</p>
<p id="contactMail">
contacto#flamingllamagames.com
</p>
</div>
</div>