[Solved]Please Tell Make Header Video Play Firefox Mp4 File Thank Indexhtml Untitled Document Lake Q37109574
Please tell me how I can make it so my header which is a videocan play in more than firefox. It is a mp4 file. Thank you
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″>
<title>Untitled Document</title>
<!– Bootstrap –>
<link href=”css/bootstrap-4.0.0.css”rel=”stylesheet”>
<link href=”style.css” rel=”stylesheet”type=”text/css”>
<link rel=”stylesheet”href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
</head>
<body>
<header>
<nav class=”navbar navbar-expand-lg navbar-lightbg-light”> <a class=”navbar-brand” href=”#”>LakesideResort Spot</a>
<button class=”navbar-toggler”type=”button” data-toggle=”collapse”data-target=”#navbarSupportedContent1″aria-controls=”navbarSupportedContent1″ aria-expanded=”false”aria-label=”Toggle navigation”> <spanclass=”navbar-toggler-icon”></span> </button>
<div class=”collapsenavbar-collapse” id=”navbarSupportedContent1″>
<ul class=”navbar-navmr-auto”>
<li class=”nav-item active”><a class=”nav-link” href=”#”>Home <spanclass=”sr-only”>(current)</span></a></li>
<li class=”nav-item”> <aclass=”nav-link” href=”#”>Rooms</a> </li>
<li class=”nav-itemdropdown”> <a class=”nav-link dropdown-toggle” href=”#”id=”navbarDropdown1″ role=”button” data-toggle=”dropdown”aria-haspopup=”true” aria-expanded=”false”> Activities</a>
<div class=”dropdown-menu”aria-labelledby=”navbarDropdown1″> <a class=”dropdown-item”href=”#”>Indoor</a> <a class=”dropdown-item”href=”#”>Outdoor</a></div>
</li>
<li class=”nav-item”> <aclass=”nav-link” href=”#”>Dining</a> </li>
</ul>
</div>
</nav>
<divid=”headerContent”>
<video autoplay=”true” loop>
<source src=”assets/br.mp4″ type=”video/mp4″>
</video>
</div>
</header>
<img src = “assets/pool-relaxation.jpg” alt =”relaxation” class = “relaxation” />
<br>
<center><a href=”#”><button>Book NowFor Guest</button></a></center>
<img src =”assets/award.jpg” alt = “rewards” class= “rewards” />
<center><a href=”#”><button>AwardsProgram</button></a></center>
<!– jQuery (necessary for Bootstrap’s JavaScriptplugins) –>
<scriptsrc=”js/jquery-3.2.1.min.js”></script>
<!– Include all compiled plugins (below), orinclude individual files as needed –>
<scriptsrc=”js/popper.min.js”></script>
<script src=”js/bootstrap-4.0.0.js”></script>
<footer>
<div class = “social”>
be social <br>
<a href=”#” class=”fafa-facebook”></a>
<a href=”#” class=”fafa-twitter”></a>
<a href=”#” class=”fafa-instagram”></a>
</div>
<address>
Contact Us<br>
72 Lake Blvd,Middletown, NJ 07748 <br>
<ahref=”tel:+1732-973-0974″> 732-973-0974</a><br>
<ahref=”mailto:info@lakeside.com”>info@lakeside.com</a><br>
</address>
</footer>
</body>
</html>
style.css
@charset “utf-8”;
body header nav li {
list-style-type: none;
}
.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
}
/* Add a hover effect if you want */
.fa:hover {
opacity: 0.7;
}
/* Set a specific color for each brand */
/* Facebook */
.fa-facebook {
background: #3B5998;
color: white;
}
/* Twitter */
.fa-twitter {
background: #55ACEE;
color: white;
}
/* Instagram */
.fa-instagram {
background: #55ACEE;
color: white;
}
#headerContent {
width: 100%;
height: 80%;
overflow: hidden;
position: relative;
}
video {
position: inherit;
min-width: 100%;
overflow: hidden;
z-index: -1;
}
.social {
float: left;
}
address {
float: right;
}
footer {
background-color: rgba(191,191,191,1.00);
}
.navbar.navbar-expand-lg.navbar-light.bg-light {
position: fixed;
width: 100%;
}
button {
clear: both;
margin-right: 1000px;
}
.relaxation {
float: left;
width: 33.33%;
padding: 5px;
}
.rewards {
float: left;
width: 33.33%;
padding: 5px;
}
Expert Answer
Answer to Please tell me how I can make it so my header which is a video can play in more than firefox. It is a mp4 file. Thank yo… . . .
OR
