Ir ao conteúdo
  • Cadastre-se

HTML Problemas com Background Video After e Before


Posts recomendados

Opa estou com esse site:

https://fredkissfree.000webhostapp.com

 

Fazendo uns testes, estou tentando colocar este background vídeo, mas está dando uma série de problemas quando eu uso a versão mobile.

Como faz para quando estiver desktop passar o vídeo e quando estiver mobile ao invés de aparecer o vídeo, aparecer uma imagem?

 

Caso alguém puder ajudar.

 

Obrigado

Link para o comentário
Compartilhar em outros sites

  • Moderador

@fredkissfree Faz uma verificação de tamanho da resolução.  Se for menor que  X você troca o video por uma imagem. 

Você pode fazer isso via Javascript ou usar o CSS3 e media querie.

 

Por exemplo:

CSS3:

/* Smartphones ----------- */
@media only screen and (max-width: 760px) {
  /*
    Algum elemento aqui 
    Você pode colocar um display: block no elemento que tem a imagem 
    e um display: none no video.
  */
}

Ou você pode detectar com javascript  quando for mobile e trocar o elemento de vídeo pela imagem.

https://www.sitepoint.com/detect-mobile-devices-jquery/

 

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

@DiF Poderia me ajudar a fazer esse CSS?

 

Pensei da seguinte maneira:

 

/* Isto eu colocaria no meu style.css? (que no caso se chama cesf.css) */
@media only screen and (max-width: 760px) {
  #background_video { 
      display: block;
  }
  #background_image { 
      display: none;
  }
}

E no html eu coloco:

<div class="main">
	<video autoplay muted loop  id="background_video" src="library/video/bg_video.mp4" type="video/mp4"></video>
	<img id="background_image" src="bg_image.jpg"/>
</div>

Se você puder me ajudar por favor, porque o vídeo no site acima quando vira mobile fica tudo desregulado pegando meu footer principalmente.

Link para o comentário
Compartilhar em outros sites

@fredkissfree

A lógica é essa, mas acho que você ta fazendo o contrário que você quer.

/* Isto eu colocaria no meu style.css? (que no caso se chama cesf.css) */ 
/*Esse caso, perceba que faz com que o #background_video da display block quando todos os dipositivos forem menor que 760px*/
@media only screen and (max-width: 760px) {
  #background_video { 
      display: block;
  }
  #background_image { 
      display: none;
  }
}

/*Agora sim, quando a tela for menor que 760px o #background_video terá display none e o #background_image terá display block*/
@media only screen and (max-width: 760px) {
  #background_video { 
      display: none;
  }
  #background_image { 
      display: block;
  }
}

 

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

Deu quase certo, quando fica mobile o vídeo realmente está sumindo, no entanto, não estou sabendo colocar a imagem background.

Meu código ta assim:

 

    <div class="wrapper">
        <div class="page-header section-dark" style="background: url('library/img/grid.png'); background-repeat: repeat;">
            <div class="filter"></div>
    		<div class="content-center">
    			<div class="container">
				<!-- <br> -->
    			</div>
    		</div>
    	</div>
        <div class="main">
		<div id="background_image"  style="background-image: url('library/img/bg_contato.jpg')"></div>
		<video autoplay muted loop  id="background_video" src="library/video/bg_video.mp4" type="video/mp4"></video>
        </div>
	</div>

Tentei colocar a imagem com DIV mas não sei se está certo, coloquei com o DIV porque fiz assim no contato.php

Se quiser ver como está funcionando só acessar o site: https://fredkissfree.000webhostapp.com

Link para o comentário
Compartilhar em outros sites

 

@fredkissfree  Brother, eu inspecionando teu site consegui debugar, não sei se é isso que você queria... mas faz isso aqui:

Na div wrapper você vai colocar uma posição relative.
.wrapper{
   position: relative;
}

Na div main você vai colocar
.main{
  position: absolute;
  left: 0;
  top: 0; 
  width: 100%;
  height: 100%; 
}

e na div da imagem você vai colocar o seguinte:
#background-image{
    background-image: url(library/img/bg_contato.jpg);
    background-size: cover;
    width: 100%;
    height: 100%;    
}

 

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

@Renan Leite BL deu certo, muito obrigado, ficou muito bom.

adicionado 10 minutos depois

@Renan Leite BL para sumir com o grid no mobile eu tenho que fazer um ID também?

 

@media only screen and (max-width: 760px) {
	#grid_desaparece {
		display: none;
	}
	#grid_aparece {
		display: block;
	}
	}

 

Link para o comentário
Compartilhar em outros sites

@fredkissfree 

 

Então, não sou tão bom em grid, mas a lógica é a mesma, daria certo, mas tu teve que criar 2 estilos diferentes!

Seria melhor tu só mudar o valor da grid quando entrar na media screen.

 

Por exemplo:  Vou fazer um quadrado de 50px x 50px na cor vermelha.

<div class="box"></div>
.box{
 width: 50px;
 height: 50px;
 background-color: red;
}

- Agora quero mudar o tamanho dele, quero mudar a cor e quero adicionar uma borda!

- Posso fazer isso direto na media screen, veja:

@media only screen and (max-width: 760px){

.box{
	width: 100px;
	height: 100px;
	background-color: blue;
	border: 5px solid red;
}

}

- Agora quando a resolução for menor que 760px, vai ter esse estilo ai acima.

 

 

Então tipo, quando tiver desktop

#grid_qualquer {
  display: grid;
  grid-template-columns: 2fr 2fr 2fr;
}

Quando tiver mobile, posso simplesmente mudar diretamente na mediaqueries

@media only screen and (max-width: 760px){

.#grid_qualquer {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
}

}

 

A ideia é essa ai, mas você tem que adaptar pro seu caso!

 

Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...