0

Olá, preciso colocar um video em meu site como esse aqui: http://www.orionbranding.com/ Todos os exemplos q acho são de videos full width, q ocupam a tela toda. O código que coloquei abaixo deixa o video como na imagem 01 inserir a descrição da imagem aqui Gostaria que o video ficasse como na imagem 02 baixo inserir a descrição da imagem aqui Alguem poderia me dar uma ajudinha???

<div class="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;

}

2 Respostas 2

1

Veja o exemplo abaixo se atende sua necessidade. Video no topo e abaixo o conteúdo do site.

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>
2
  • 1
    vou testar aqui. obrigado Commented 24/08/2017 às 18:18
  • Funcionou? Se foi útil não se esqueça de dar o upvote. Caso precise de adaptações e ajudas ainda, é só comentar :) Abs
    – GIA
    Commented 24/08/2017 às 21:34
0

Tens algum exemplo do código que você já fez pra analisar? Em geral, utilizamos porcentagens em propriedades CSS para garantir a responsividade, mas é bem dependente de como você estruturou o seu código

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

1
  • Coloquei o codigo q tenho Commented 24/08/2017 às 18:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .