Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal, sou novo em programação e estou iniciando a criação de um site para meu time de CSGO.
Criei um menu e logo abaixo do menu adicionei um vídeo como background e definir suas dimensões.
Sei como centralizar o vídeo utilizando as tags como por exemplo right: 230px; left: 230px; e um top: 84px; para deixar o video abaixo do menu.
O grande problema é quando eu diminuo o tanho do navedor, eu quero fazer com que o vídeo possa ficar em costado na margem, já tentei utilizar o margin: 0 auto; e não deu certo.
Atualmente meu CSS do vídeo está da seguinte maneira:
video#fundo-home{
position: fixed;
right: 230px;
left: 230px;
bottom: 0;
min-width: 70%;
min-height: 70%;
width: auto;
height: auto;
background-cover: cover;
top: 84px;
opacity: 0.5;
}
Preciso que o vídeo se enquadre de acordo com o tamanho da tela do navegador...
Desde já agradeço a ajuda!>
Em 20/03/2017 at 14:55, Eziquiel disse:
Olá, amigo.
Aconselho fazer uso do "display: flex" e da propriedade "@media" do CSS para deixar sua div responsiva.
No exemplo eu criei uma div '.container' com a propriedade "display: flex" com todo seu conteúdo alinhado no centro através da propriedade "justify-content: center". Dentro dela uma outra div que representa o seu vídeo.
O vídeo contem 700px de largura (como exemplo). No CSS eu criei uma regra onde, quando a largura da tela for inferior a 700px, o o vídeo passa a ocupar toda a largura da tela.
Live Demo:
http://codepen.io/Eziquiel/pen/LWQeYY?editors=0100
Eziquiel, muito boa exatamente o que eu queria meu amigo muito obrigado de coração.
Olá, amigo.
Aconselho fazer uso do "display: flex" e da propriedade "@media" do CSS para deixar sua div responsiva.
No exemplo eu criei uma div '.container' com a propriedade "display: flex" com todo seu conteúdo alinhado no centro através da propriedade "justify-content: center". Dentro dela uma outra div que representa o seu vídeo.
O vídeo contem 700px de largura (como exemplo). No CSS eu criei uma regra onde, quando a largura da tela for inferior a 700px, o o vídeo passa a ocupar toda a largura da tela.
Live Demo:
http://codepen.io/Eziquiel/pen/LWQeYY?editors=0100