Sign in


Sign up


Video Intro

MDB SupportCategory: MDB jQueryVideo Intro
Brandon Matthews asked 1 week ago in MDB free, version:4

I am trying to use a video intro and a couple things went wrong:

  1. 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.
  2. 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%);
}
Ollie Vincent Pro User replied 7 days 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

3 Answers
Marta Szymanska answered 7 days ago

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”&gt;
<!– Bootstrap core CSS –>
<link href=”https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css&#8221; rel=”stylesheet”>
<!– Material Design Bootstrap –>
<link href=”https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/css/mdb.min.css&#8221; 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&#8221; autoplay loop muted playsinline>
<source src=”https://mdbootstrap.com/img/video/animation.mp4&#8243; 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”&gt;
</script>
<!– Bootstrap tooltips –>
<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js”&gt;
</script>
<!– Bootstrap core JavaScript –>
<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js”&gt;
</script>
<!– MDB core JavaScript –>
<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/js/mdb.min.js”&gt;
</script>
<!–My Javasctipt–>
<!– <script type=”text/javascript” src=”./assets/index.js”>
</script> –>
</body>

</html>

 

Best,

Marta

Brandon Matthews replied 6 days 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%);
}

Ollie Vincent Pro User answered 6 days ago

You could try something like .top-nav-collapse{background-color:red !important;

Josip Tomašev Pro User answered 5 days ago

Hi,

As I can see in provided code, css class was defined:

.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