My Flexbox code is working fine on Firefox and Chrome on the PC and Safari on the Mac. The background video plays as a loop and the three logos on top are the correct size, and the layout works responsively:
http://www.reedyrace.com/indexFLEX.html
However, it’s a different story on MSIE 11. The video plays fine, but the logos are only about 20px across, each – very tiny. I have included the flex style variations for the different browsers. What is it about MSIE that makes this happen, and is there a way around it?
<style type="text/css">
#container, body {
background-color: #000;
}
#flexcontainer,
.flexrow,
.flexcard {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
}
.flexrow {
justify-content: center;
}
/* Align vertical */
#vertical {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.flexcard {
text-align: center;
padding: 2%;
}
img.imgTile {
width: 100%;
max-width: 400px;
text-align: center;
}
/* http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video */
video
{
width: 100%;
height: auto;
max-height: 100%;
}
/* top: 50% will make it fill the screen vertically. top: 75% is to leave a gap at top for the logos. */
video#bgvid {
position: fixed;
top: 75%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(polina.jpg) no-repeat;
background-size: cover;
}
.imgbutton {
-webkit-transition:opacity 1.0; /* value at beginning of transition */
transition:opacity .2s; /* transition duration */
}
.imgbutton:hover {
opacity: 0.5; /* value at end of transition */
}
/* optimize for smaller screens */
@media only screen and (max-width: 3000px) {
.flexcard {
flex-basis: 28%;
}
}
@media only screen and (max-width: 900px) {
.flexcard {
flex-basis: 45%;
}
}
/* flex-basis = width */
@media only screen and (max-width: 600px) {
.flexcard {
flex-basis: 100%;
}
}
</style>
</head>
<body>
<div id="vertical">
<div id="flexcontainer">
<div class="flexrow">
<div class="flexcard">
<a href="2016/offroad/index.html">
<img class="change imgTile imgbutton" src="logo_home_offroad.png" alt="Champions" >
</a>
</div>
<div class="flexcard">
<a href="2016/1.12onroad/index.html">
<img class="change imgTile imgbutton" src="logo_home_1.12.png" alt="Champions">
</a>
</div>
<div class="flexcard">
<a href="2016/onroad/index.html">
<img class="change imgTile imgbutton" src="logo_home_TC.png" alt="Champions">
</a>
</div>
</div>
</div>
</div>
<video autoplay loop id="bgvid">
<source src="2016/video/full-race1.webm" type='video/webm' />
<source src="2016/video/full-race1.mp4" type='video/mp4'>
Video not supported.
</video>
</body>