Topic: Video Intro
I am trying to use a video intro and a couple things went wrong:
- After using both the css and html provided the “creative agency” text and button was at the bottom center of the page instead of the middle of the page like the demo shows.
- After trying to add my own video the video only shows up filling half the screen.
html
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Brandon Matthews</title>
<!-- Font Awesome -->
<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<linkhref="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css"rel="stylesheet">
<!-- Material Design Bootstrap -->
<linkhref="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/css/mdb.min.css"rel="stylesheet">
<!--My CSS-->
<linkhref="./assets/index.css">
</head>
<body>
<!-- Main navigation -->
<header>
<!-- Navbar -->
<navclass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
<divclass="container">
<aclass="navbar-brand"href="#">Navbar</a>
<buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarTogglerDemo02"aria-controls="navbarTogglerDemo02"
aria-expanded="false"aria-label="Toggle navigation">
<spanclass="navbar-toggler-icon"></span>
</button>
<divclass="collapse navbar-collapse"id="navbarTogglerDemo02">
<ulclass="navbar-nav mr-auto smooth-scroll">
<liclass="nav-item">
<aclass="nav-link"href="#home">Home
<spanclass="sr-only">(current)</span>
</a>
</li>
<liclass="nav-item">
<aclass="nav-link"href="#about"data-offset="90">About</a>
</li>
<liclass="nav-item">
<aclass="nav-link"href="#features"data-offset="90">Features</a>
</li>
<liclass="nav-item">
<aclass="nav-link"href="#services"data-offset="90">Services</a>
</li>
<liclass="nav-item">
<aclass="nav-link"href="#opinions"data-offset="30">Opinions</a>
</li>
<liclass="nav-item">
<aclass="nav-link"href="#team"data-offset="90">Team</a>
</li>
<liclass="nav-item">
<aclass="nav-link"href="#contact"data-offset="90">Contact</a>
</li>
</ul>
<!-- Social Icon -->
<ulclass="navbar-nav nav-flex-icons">
<liclass="nav-item">
<aclass="nav-link">
<iclass="fa fa-facebook light-green-text-2"></i>
</a>
</li>
<liclass="nav-item">
<aclass="nav-link">
<iclass="fa fa-twitter light-green-text-2"></i>
</a>
</li>
<liclass="nav-item">
<aclass="nav-link">
<iclass="fa fa-instagram light-green-text-2"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Full Page Intro -->
<divclass="view">
<videoclass="video-intro"poster="https://mdbootstrap.com/img/Photos/Others/background.jpg"
autoplayloopmutedplays-inline>
<sourcesrc="./assets/images-videos/powerful-energy-core_zk1z_tzzs__D.mp4"type="video/mp4">
</video>
<!-- Mask & flexbox options-->
<divclass="mask rgba-gradient d-flex justify-content-center align-items-center">
<!-- Content -->
<divclass="container px-md-3 px-sm-0">
<!--Grid row-->
<divclass="row wow fadeIn">
<!--Grid column-->
<divclass="col-md-12 mb-4 white-text text-center wow fadeIn">
<h3class="display-3 font-weight-bold white-text mb-0 pt-md-5 pt-5">Creative Agency</h3>
<hrclass="hr-light my-4 w-75">
<h4class="subtext-header mt-2 mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit deleniti consequuntur nihil.</h4>
<ahref="#!"class="btn btn-outline-white">
<iclass="fa fa-home"></i> Visit us
</a>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Content -->
</div>
<!-- Mask & flexbox options-->
</div>
<!-- Full Page Intro -->
</header>
<!-- JQuery -->
<scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/js/mdb.min.js"></script>
<!--My Javasctipt-->
<scripttype="text/javascript"src="./assets/index.js"></script>
</body>
</html>
css
/* Required for full background image */
html, body, header, .view {
height: 100%;
}
@media (max-width: 740px) {
html, body, header, .view {
height: 100vh;
}
}
.top-nav-collapse {
background-color: #563e91!important;
}
.navbar:not(.top-nav-collapse) {
background: transparent!important;
}
@media (max-width: 768px) {
.navbar:not(.top-nav-collapse) {
background: #563e91!important;
}
}
@media (min-width: 800px) and (max-width: 850px) {
.navbar:not(.top-nav-collapse) {
background: #563e91!important;
}
}
.rgba-gradient {
background: -moz-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
background: -webkit-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
background: linear-gradient(to45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
}
Hi,
try this code but change a link to the default video to your own:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Brandon Matthews</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/css/mdb.min.css" rel="stylesheet">
<!--My CSS-->
<!-- <link href="./assets/index.css"> -->
<style type="text/css">
/* Required for full background image */
html, body, header, .view {
height: 100%;
}
@media (max-width: 740px) {
html, body, header, .view {
height: 100vh;
}
}
.top-nav-collapse {
background-color: #563e91!important;
}
.navbar:not(.top-nav-collapse) {
background: transparent!important;
}
@media (max-width: 768px) {
.navbar:not(.top-nav-collapse) {
background: #563e91!important;
}
}
@media (min-width: 800px) and (max-width: 850px) {
.navbar:not(.top-nav-collapse) {
background: #563e91!important;
}
}
.rgba-gradient {
background: -moz-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
background: -webkit-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
background: linear-gradient(to45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
}
</style>
</head>
<body>
<!-- Main navigation -->
<header>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
</span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto smooth-scroll">
<li class="nav-item">
<a class="nav-link" href="#home">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about" data-offset="90">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#features" data-offset="90">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services" data-offset="90">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#opinions" data-offset="30">Opinions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#team" data-offset="90">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact" data-offset="90">Contact</a>
</li>
</ul>
<!-- Social Icon -->
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item">
<a class="nav-link">
<i class="fa fa-facebook light-green-text-2">
</i>
</a>
</li>
<li class="nav-item">
<a class="nav-link">
<i class="fa fa-twitter light-green-text-2">
</i>
</a>
</li>
<li class="nav-item">
<a class="nav-link">
<i class="fa fa-instagram light-green-text-2">
</i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Full Page Intro -->
<div class="view">
<video class="video-intro" poster="https://mdbootstrap.com/img/Photos/Others/background.jpg" autoplay loop muted playsinline>
<source src="https://mdbootstrap.com/img/video/animation.mp4" type="video/mp4">
</video>
<!-- Mask & flexbox options-->
<div class="mask rgba-gradient d-flex justify-content-center align-items-center">
<!-- Content -->
<div class="container px-md-3 px-sm-0">
<!--Grid row-->
<div class="row wow fadeIn">
<!--Grid column-->
<div class="col-md-12 mb-4 white-text text-center wow fadeIn">
<h3 class="display-3 font-weight-bold white-text mb-0 pt-md-5 pt-5">Creative Agency</h3>
<hr class="hr-light my-4 w-75">
<h4 class="subtext-header mt-2 mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit deleniti consequuntur nihil.</h4>
<a href="#!" class="btn btn-outline-white">
<i class="fa fa-home">
</i> Visit us
</a>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Content -->
</div>
<!-- Mask & flexbox options-->
</div>
<!-- Full Page Intro -->
</header>
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js">
</script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js">
</script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/js/mdb.min.js">
</script>
<!--My Javasctipt-->
<!-- <script type="text/javascript" src="./assets/index.js">
</script> -->
</body>
</html>
Best,
Marta
Brandon Matthews commented 7 years ago
Thanks Marta, figured it out. I didnt give the html tag a class of full-height. Duh! But now a new problem arrived. My fixed-top scrolling navbar just stays transparent while scrolling. Can you help with that? html Home (current) About Projects Contact css /* Required for full background image */ html, body, header, .view { height: 100%; } @media (max-width: 740px) { html, body, header, .view { height: 100vh; } } .top-nav-collapse { background-color: black !important; } .navbar:not(.top-nav-collapse) { background: transparent !important; } @media (max-width: 768px) { .navbar:not(.top-nav-collapse) { background: black !important; } } @media (min-width: 800px) and (max-width: 850px) { .navbar:not(.top-nav-collapse) { background: black !important; } } .rgba-gradient { background: -moz-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%); background: -webkit-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%); background: linear-gradient(to 45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%); }
.top-nav-collapse {
background-color: black !important;
}
But, this part of code I don't understand:
.navbar:not(.top-nav-collapse) {
background: transparent !important;
}
@media (max-width: 768px) {
.navbar:not(.top-nav-collapse) {
background: black !important;
}
}
@media (min-width: 800px) and (max-width: 850px) {
.navbar:not(.top-nav-collapse) {
background: black !important;
}
}
Because, it's enough to be written:
.navbar {
background: transparent !important;
}
@media (max-width: 768px) {
.navbar {
background: black !important;
}
}
And everithing will work fine.
Greetings.
Josip FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Ollie Vincent pro commented 7 years ago
Could you show a screenshot or share a link? My immediate thought is that your video isn't big enough (silly - I know). Thanks