Visit my website here
After testing my site on various devices such as desktop Chrome, Android, Samsung tablet, iPhone 6, and iPad, I noticed that the banner doesn't quite work well on iOS, particularly on the iPad. The height of the banner becomes overly large and does not match the device's screen height.
I'm struggling to pinpoint where in the code the issue lies, but ideally I would like the banner to adjust its height dynamically to match the window size on all devices - if I used that term correctly.
The code for my banner is based on this article Responsive Height/Width Video Header
Here is the code snippet I am currently using:
#banner.container-fluid {
padding: 0;
position: relative;
}
#banner.overlay:after {
position: absolute;
content:" ";
top:0;
left:0;
width:100%;
height:100%;
display: block;
z-index:0;
background-color: rgba(0,0,0,0.8);
}
header {
position: relative;
overflow: hidden;
width:100vw;
height:100vh;
max-height:100vh;
text-align:center;
}
.banner-text {
position: relative;
top: 55%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 1;
margin: 0 auto;
max-width: 550px;
}
.banner-text h1,
.banner-text h4 {
color: #fff;
}
.banner-text h1 {
padding-bottom: 20px;
}
.banner-text h4 {
padding-bottom: 40px;
}
.banner-text .logo-white {
width: 75px;
height: 65px;
display: block;
margin: 0 auto 20px auto;
}
.video-holder {
position:absolute;
height:100%;
width:200%;
left:-50%;
}
video {
position:absolute;
top: -99999px;
bottom: -99999px;
left: -99999px;
right: -99999px;
margin: auto;
min-height:100%;
min-width:50%;
}