Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
fredkissfree

HTML Problemas com Background Video After e Before

Recommended Posts

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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

Compartilhar este post


Link para o post
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.

Compartilhar este post


Link para o post
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;
  }
}

 

Editado por Renan Leite BL
  • Curtir 1

Compartilhar este post


Link para o post
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

Compartilhar este post


Link para o post
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

Compartilhar este post


Link para o post
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;
	}
	}

 

Compartilhar este post


Link para o post
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!

 

Editado por DiF
Faltou acrescentar dois códigos com o botão CODE <>

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Renan Leite BL No meu caso é mais simples, ele já abre uma imagem grid.png e ela se repete.

Não preciso criar a grid. O que estou tentando fazer é quando for mobile não abrir esse grid.png.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@fredkissfree Ah entendi mano...não sabia que era uma imagem.

A lógica é a mesma, se você quer que suma a imagem só dar display none na resolução que você quer que ela suma.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário






Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações 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

×