Recently, I undertook a project that required me to replicate the exact content from https://www.google.com/atap/project-jacquard/.
The issue arose when I used a video tag to play a background video, as it only displayed half of the video in Internet Explorer while working perfectly fine on other browsers. The specific version of IE I am using is 11.0. Below is a screenshot depicting the problem.
I've spent some time investigating this problem but haven't been able to pinpoint where I went wrong. Any assistance in identifying my mistake would be greatly appreciated...
Furthermore, the footer is not responsive to different screen sizes.
Here is the snippet of the code I've been working with ->
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Project Jacquard</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Karla:400,700,400italic,700italic" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/one-page-wonder.css" rel="stylesheet">
<link href="css/yes.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<img id="img1" src="img/jacquard-row.svg" alt="Project Jacquard" class="ri" style=""><!-- width:22.5%; -->
</div>
</div>
<!-- /.container -->
</nav>
<header class="header-image">
<div class="headline" style="height: 850px;">
<div class="container" id="content">
<h2 style="padding-bottom: 20px;">Technology woven in.</h2>
<button class="centerButton">Play Film</button>
</div>
<video class="vid" autoplay loop controls muted> <!-- id="bgvid" style="width:1349; height:600;" -->
<source src="video/Jacquard.mp4" type="video/mp4">
<img id="alternative" src="alternative.jpg" />
</video>
<iframe style="margin-top: 60px;" class="vid" id="yt" src="https://www.youtube.com/embed/qObSFfdfe7I" frameborder="0" allowfullscreen></iframe>
</div>
</header>
<!-- Page Content -->
...
CSS file 1 ->
body {
-webkit-animation-delay: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-duration: 0.1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
overflow-x:hidden; }
/*video {display: block;}*/
@-webkit-keyframes fontfix {
from { opacity: 1; }
to { opacity: 1; } }
...
#contact{
background-color: rgba(230,230,230,.8); }
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden; }
li{
float: left;
font-family: "Karla",sans-serif;
font-size: 16px; }
a {
font-family: "Karla",sans-serif;
font-size: 16px;
display: block;
width: 100px;
color:#676767; }
...
.vid {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
object-fit: cover;
z-index: -1;
position: absolute;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-size: cover; }
#yt {
display: none;
z-index: 1; }
#content { }