Hey there fellow coders!
I'm facing a little issue. I'm attempting to replicate my webpage on another page, but every time I try to remove the logo, the video disappears as well. It's quite puzzling. I have the code in place, but it seems like there is some dependency within my code that requires the logo to be present. Any assistance you can provide would be greatly appreciated. You can check out the live example here. Simply inspect element on any browser and remove the logo to see it vanish.
.Intro-Video {
position: relative;
z-index: 9999;
width: 100%;
display: block;
background-color: #fff;
overflow: hidden;
}
.Intro-Video1 {
position: relative;
z-index: 9999;
width: 100%;
display: block;
margin-top: 200px;
background-color: #fff;
overflow: hidden;
}
.video-box {
height: 100%;
width: 100%;
position: relative;
}
#video-container {
height:100%;
width:100%;
overflow: hidden;
}
video {
position:absolute;
z-index:0;
}
video.fillWidth {
width: 100%;
}
.Kadeem-Logo {
position: relative;
top: 0px;
width: 100%;
display:block;
}
.Kadeem-Logo img {
display: block;
width: auto;
max-width: 100%;
} <div class="video-box">
<div id="video-container">
<video autoplay class="fillWidth">
<source src="http://client.hugoandmarie.com.s35719.gridserver.com/client/AlexandraPosen/Alex_Posen_Video.mp4" type="video/mp4" />
</video>
<div class="Kadeem-Logo">
<img src="http://www.kadeem.london/Content/Image/KL.png" alt="Kadeem Logo" title="Kadeem Logo">
</div>
</div>
</div>
</div>