I'm very new at CSS so please be patient with me. I am trying to set a video background for a section with a semi transparent text box over the video. After wrestling with it for a while, I finally got the video fitted to the screen and resizing when the screen shrinks.

The problem is, now the section containing the text doesn't resize when the screen becomes narrower. Instead, the text disappears under the next div down.

I presumed this is because the aspect ratio of the video can't be modified. The best solution I could come up with is to set a media query to replace the video with a static background when the screen is under 700 pixels wide. I was hoping that the normal properties of auto;" would then kick in and accommodate the additional length of the text. However, the video doesn't respond to the "display: none;" tag when placed in a media query.

I'm kind of stuck as to what to do.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, `enter code 
here`initial-scale=1.0">
    <title>Jamaa</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


</head>
<body>

<ul class="navbar">
<li><p href="#home" style="margin-left: 20px;">JAMAA</p></li>
<li style="float:right"><a href="#news">Contact</a></li>
<li style="float:right"><a href="#contact">News</a></li>
<li style="float:right"><a class="left" href="#about">Blog</a></li>
</ul>

<section class="intro">  
<div class="content">
  <img src="images/jamaalogo.png"
       style="height:300px; margin-top: 5%; align-content: center; "
       class="center">
  <h1 class="motto">Share. Profit.</h1>
<h2 style="text-align: center;">Using finance to increase cryptocurrency 
access for those who need it most.</h2>
</div>
</section>

<div class="video_wrapper">
     <video preload="auto" autoplay="true" loop="loop" muted="muted" 
volume="0" poster="images/relief.jpg" style="height:auto; ">


     <source src="images/fountain.mp4" type="video/mp4">

    <div class="problem_box"><h2>We Have a Problem</h2><p>People are 
 losing their savings. Governments are collapsing. The threat of war is 
 looming on the horizon. All of these problems have a common source- bad 
 money. And yet most of us don't know what we can do about it.</p></div>


</video>

Here is the CSS:

@font-face {
font-family: 'textabold';
src: url('fonts/texta-bold-webfont.woff2') format('woff2'),
     url('fonts/texta-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;

}

<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" 
rel="stylesheet">



* {
 box-sizing: border-box; 
}

body {
margin: 0; 
font-weight: 500;
font-family: 'Roboto Mono', monospace;
overflow-x: hidden;
}

h2 {
 font-size: 2em;
 display: block;
 color: white;
 font-weight: 300;
 }


h1 {
font-size: 3em;
display: block;
color: white;
font-weight: 300;
}

p {
 font-size: 1 em;
 font-weight: 500;
 color: white;
}

a {
 font-weight: 700;
 color: #333;

 &:hover{ 
 opacity: 0.8;
}

 &:active {
 top: 1px;
}
}

ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: #333;
 }

li {
 float: left;
 }

 li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
 }

 li a:hover:not(.active) {
   background-color: #111;
  }



  .container {
    display: flex;
    color: white;
    justify-content: space-between;
    align-items: center;
    padding: 2px 44px;     
  }


.navbar {
  position: fix
  }

 @media screen and (max-width : 760px){
  ul {
     display: none;
   }

 .intro { background: red;}

 .video_wrapper {
    height:auto;
    background: url("images/relief.jpg") no-repeat center center;
    background-size: cover;

 }

 .video { 
      display: none;
 }
}


.title {
  display: block;
  color: white;
  align-items: center;
  padding: 12px 44px;
  font-size:;
 }

li a:hover {
  background-color: #4CAF50;
 }

.intro {
  height: 92vh;
  background-color: #4CAF50;
  display: block;
  overflow: hidden;
 }

 .problem {
   max-height: 60vh;
   background-size: cover;
   opacity: 0.8;
   z-index: -100;
 }

.problem_box {
  height:70%;
  z-index: 2;   
 }

.video_wrapper{
  width: auto;
  position: relative;
  overflow: hidden;
  z-index: -1;
  margin-bottom: -30px;
  text-align: center;
 }

.video_wrapper video{ 
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;   
  z-index: 1;
  height: auto;
  overflow: auto;
 }

.video_wrapper .problem_box {
   height: auto;
   width: 70%;
   position: absolute;
   z-index: 2;
   top: 0px;
   left: 0px;
   background: #333;
   opacity: 0.9;
   display: inline-block;
   margin-top: 8%;
   margin-left: 15%;
   box-sizing: content-box;
   }

I suppose I could just give up and use static background, but it took me so long to figure out the video background I'd hate to throw it away it this point... any help is much appreciated!

1 Answers

0
Imam Stevanno On Best Solutions

you forgot to put the video class on the video tag

<video preload="auto" autoplay="true" loop="loop" muted="muted" 
volume="0" poster="images/relief.jpg" style="height:auto; " class="video">