I designed an html page but my href and my youtube iframe isn't letting me click-CodePudding

I have a web page with just one CSS file and one html file and I don't know why I can't click on this YouTube embedded link or click on "click here" a.href

https://codepen.io/deuelJordan/pen/XWgQGJK

        <iframe width="750" height="422" src="https://www.youtube.com/embed/rt-2cxAiPJk"
            title="YouTube video player" frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen>
        </iframe>

thank a bunch

CodePudding user response：

the problem is in your CSS part. if you change

z-index: -1;

z-index: 1;

your page will be working

CodePudding user response：

Just comment or remove z-index as below:

.black-rect {
    background-color: rgb(0, 0, 0);
    border-radius: 10px;
    /* z-index: -1; */
    width: 1280px;
    height: 720px;
    position: relative;
    left: 125px;
}

You can check the updated demo on CodePen:
https://codepen.io/tibichi/pen/NWgmVOE

CodePudding user response：

Take a look at the z-index documentation here: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

You should change the

z-index: -1;

z-index: 1;

this will make the code link you want others to access work.

If there is anything else I can help with it, it'll be my pleasure to help! :)