CSS видео фон не исчезает при уменьшении экрана - PullRequest
Новая
       38

CSS видео фон не исчезает при уменьшении экрана

0 голосов
/ 23 апреля 2019

Я очень новичок в CSS, поэтому, пожалуйста, будьте терпеливы со мной.Я пытаюсь установить видео фон для раздела с полупрозрачным текстовым полем над видео.После некоторой борьбы с ним, я, наконец, установил видео на экран и изменил размеры при уменьшении экрана.

Проблема в том, что теперь раздел, содержащий текст, не изменяется, когда экран становится уже.Вместо этого текст исчезает при следующем делении вниз.

Я предположил, что это потому, что соотношение сторон видео нельзя изменить.Лучшее решение, которое я мог бы придумать, - это установить медиазапрос, чтобы заменить видео статическим фоном, когда ширина экрана составляет менее 700 пикселей.Я надеялся, что обычные свойства auto; »затем добавят и разместят дополнительную длину текста. Однако видео не реагирует на тег« display: none; »при размещении в медиа-запросе.

Я как бы застрял в том, что делать. 

<!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>

Вот 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;
   }

Полагаю, я мог бы простоотказаться от статического фона и использовать его, но мне понадобилось так много времени, чтобы выяснить фоновое изображение, которое я не хотел бы выбросить в этот момент ... любая помощь очень ценится!

1 Ответ

0 голосов
/ 23 апреля 2019

вы забыли поставить класс video для видео тега 

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