Put a responsive video on my webpage

Navigation
0

Hello, I need to put a video on my site like this one: link All the examples I think are full width videos, q occupy the entire screen. The code I put below leaves the video as in image 01 Iwouldlikethevideotolooklikeintheimage02low Couldsomeonegivemealittlehelp???

<divclass="box-video">
<video autoplay loop muted id="background">
    <source src="{{url('templates/web/images/background/clouds.mp4')}}" type="video/mp4">
</video>
<img src="{{url('templates/web/images/logo-white.png')}}">


video{
height: auto;
margin-top: -50px;
width: 100%;
z-index: -1;

}

    
asked by anonymous 24.08.2017 / 19:41

2 answers

0

See the example below if it meets your need. Video at the top and bottom of the site content.

style.css 

video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background: url('seuthumbnail.jpg') no-repeat;
    background-size: cover;
    transition: 1s opacity;
}
.conteudo {
  width: 100%;
  position: absolute;
  top: 400px;
  left: 0;
  z-index: 100;
  background-color: white;
  min-height: 100%;
}

index.html 

<video autoplay>
    <source src="KILL_THE_NOISE__KILLUMINATI_MIXTAPE.mp4" type="video/mp4">
    <source src="KILL_THE_NOISE__KILLUMINATI_MIXTAPE.mp4" type="video/ogg">
    Your browser does not support the video tag.
</video>

<div class="conteudo">
  Aqui vai o resto do seu site.
</div>
    
24.08.2017 / 20:11
0

Do you have any examples of the code you have already analyzed? In general, we use percentages in CSS properties to ensure responsiveness, but it is very dependent on how you structured your code. 

<style>
.container {
  width: 600px;
}

.container video {
  width: 100%;
}
</style> 
<div class="container">
    <video controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
  </video> 
 </div>
    
24.08.2017 / 19:56
How to create a web-proxy with cURL + PHP Change ConnectionString to AppData / Roaming