Video Intro

Brandon Matthews asked 5 months ago

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 commented 5 months 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


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 5 months 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%);
}


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


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


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No