Puts, bom demais! Tava quebrando a cabeça com isso faz um bom tempo, usando tags que eu nunca vi, webkits e até frameworks. Você resolveu meu problema com meia dúzia de tags e algumas linhas em CSS. Continua trazendo esse tipo de vídeo, excelente qualidade!
fiz exatamente os passos que voce fez, porem o video aparece travado no inicio. Ele aparece mas não funciona o autoplay, mesmo colocando (autoplay="true"). O que fazer?
Parabéns pelo vídeo, quero fazer apenas uma correção, onde você fala da propriedade background-cover, na verdade o nome da propriedade é background-size com valor cover.
Boa noite. Estou inserindo um video seguindos os passos do video mas preciso que ele rode no celular o qual não acontece. Alguem sabe porque ? Todos os celulares não estao rodando o video.FIca a tela de inicio sem as opcoes de botoes a qual desabilitei mas o video fica parado.
Uma dúvida, e se eu por questão de desempenho quiser ao invés de um vídeo, servir ao usuário uma imagem quando ele estiver no celular ou tablet, como devo fazer?
Bruno Santos você pode utilizar media queries, ou gerar imagens de alta performance utilizando o picture. Dê uma olhada nesse artigo: tableless.com.br/imagens-responsivas-de-alta-performance/ :) Abraços!
Ferreira Studios legal cara, vou dar uma pesquisada sim, e se eu quiser centralizar o texto que está acima do vídeo? Pois depois que colocamos position absolute, a propriedade margin: 0 auto; não funciona mais?
Fala galera, preciso saber como exportar o video na melhor qualidade possivel para que o site rode tranquilamente em qualquer dispositivo, vocês tem sugestões? Não acho nada quanto a isso na net, só como colocar o video-bg no website, igual a aula de vocês. Isso porque tenho visto alguns videos-bg que ficam muito ruins mesmo, muito pixelado. Valeu
+Josias Pereira Bueno isso pode variar de device para device, o ideal é você criar várias versões e fazer um request dependendo do tamanho da tela do usuário.
olá Ferreira boa excelente aula. Porém aqui eu fiz tudo certo,mas o meu vídeo não está centralizado ELE INICIA COM UM ZOOM . Quando aperto CTRL (-) no teclado , o video só aparece certinho quando alcanço 30% de - zoom
Cara tudo bem? Ótima aula! Eu estou com um problema nessa situação. Adicionei um video como background somente em mp4. No desktop esta funcionando perfeitamente porém quando abro no no celular IOS por exemplo, ele nao escuta e aparece o botão de play padrão do IOS. Li alguns artigos sobre e dizem que a apple por padrão desabilita o autoplay por causa de pacote de dados. Sabe algo sobre? vou tentar exatamente da forma como você explicou nessa aula! Muito Obrigado!
Tenho duas dúvidas: 1 - Na w3schools fala que "o atributo de reprodução automática(autoplay) não funciona em dispositivos móveis como iPad e iPhone.". Tem alguma solução sem ser o autoplay? 2- Ao testar a responsividade do vídeo em dois Smartfones diferentes, no iphone 4s carregou normalmente mediante o clique no play pelo motivo citado acima, mas o outro smartfone moto g4 nem se quer o vídeo apareceu. Alguém pode me ajudar?
bom dia!primeiramente parabéns boa aula agora pode me tira duvida?como coloco meu site padrão para abrir em todos tamanhos de tela? usando o design responsivo?não consigo implementar
Amigo, muito obrigado pela vídeo aula! Ajudou bastante no aprendizado sobre responsividade. Agora uma dúvida: meu chrome não reconheceu esta propriedade background-cover e não encontrei documentação sobre. Saberia me informar o por quê?
É porque esta errado mesmo. Acho que a pessoa do vídeo foi copiar de alguém e tentou repassar ou não entende muito bem de CSS mesmo. Tanto que está em vermelho ali, mas ela nem se da conta. Você pode usar nestes casos o object-fit: cover;
Muito bom o video! Só uma dúvida. Tem como eu fazer uma imagem responsiva, e aplicar uma animação nela? O bg pe uma imagem que deveria ficar indo pro lado sempre, e ser responsivo. Mas quando aplico a responsividade(essa palavra? O.o) a animação deixa de funcionar.
Djonathan Rafael Krause nunca trabalhei com animações diretamente em backgrounds. Nem mesmo a documentação da W3schools fala nada sobre a utilização da propriedade animation para background-image (Confira em: www.w3schools.com/cssref/pr_background-image.asp). Vou procurar saber mais sobre, e te falo. Forte abraço ;)
Ferreira Studios Eu usei isso pra animar o bg @keyframes bgAnimado from { background-position: 0 350; } to { background-position: 100% 350; } animation: bgAnimado 120s linear infinite; -ms-animation: bgAnimado 120s linear infinite; -moz-animation: bgAnimado 120s linear infinite; -webkit-animation: bgAnimado 120s linear infinite; To iniciando com front-end. E seu canal é muito bom. Parabéns e vlw pelo help ;)
as far as i know, webm is the best, BUT, there are no software to edit it, and theres the compatibility problems with mobile devices. I hope this help you to resolve your problem. :)
+Ferreira Studios ® Olá boa tarde, tem uma forma do vídeo do youtube fica responsivo, tipo ja tenho o site e coloquei o vídeo porem não fica responsivo ? Valeu, gostei muito do Seu Vídeo Parabéns !
Cara, parabéns pelo vídeo. Só uma dica: coloca a musica de fundo um pouco mais baixa. Não consegui concentrar na aula. Abraço.
7 ปีที่แล้ว
Parabéns amigo , não entendo muito de html , mas fiquei impressionado , este vídeo responsivo seria bom para uma e commerce , no caso ficaria pesado ? apartir de hoje ganhou mas um aprendiz , vou estudar muito com seus videos . obrigado !!!
Muito bom eu não sabia que era tão simples, gostaria de saber se eu preciso criar um versão do vídeo menor para o smartphone e tablet, ou não vai ter problemas. Por exemplo usuarios com internet 3g terão consumo maior de dados.
Leonardo, como eu faço dessa forma? No desktop vai executar o vídeo normal. Quando eu abrir em um dispositivo mobile por exemplo irá abrir uma imagem no lugar do vídeo. Sou iniciante ainda.
Sensacional seu vídeo. me ajudou muito, mas não funciona em dispositivos móveis? No iphone ficou com um sinal de play e no ipad como uma foto. Parabéns pelo seu canal! Muito bom mesmo!
***** Boa ressalva, eu não tinha visto o vídeo deles falando sobre. Pelo grau da documentação da w3, imaginava algum tipo de relação. Obrigado por contribuir. Forte abraço e continue nos acompanhando. ;)
Olá, Denilson! Procuro em várias fontes, muitas delas gringas. Leio vários livros, participo de fóruns... Mas, mais importante que tudo isso, vou treinando e aprendendo também na prática! Se vc tiver algum assunto que tem dúvida, pode mandar como sugestão para os próximos vídeos! Abraços!
Se você pudesse me passar algum fórum em que você aprende e me recomendar algum livro vou ficar muito grato, sou desenvolvedor web e design gráfico, mais seus trabalhos são incríveis, vlw por responder!
Olá acabei de me inscrever no seu canal, gosto muito dos seus vídeos, e quero dar uma sugestão. Faz um vídeo ensinando como deixar o Scroll Infinito acompanhado de um botão carregar mais. Procurei no youtube mais não achei ninguém explicando do 0, tenho certeza que será muito visualizado.
+Link o Paladino cara que Deus te abençoe muito.......eu tava botando a imagem pelo CSS....tava ficando tudo cagado quando abria meu TCC em tela de 21polegadas ou em resolução para smartphone.
E ae cara, blz?? Eu estou usando um plugin para wordpress chamado optimizepress, fiz o que vc fez e deu certo. Só tem um problema, se eu coloco um texto ou um título o vídeo fica na frente. Você tem ideia do que pode ser? Parabéns pelo vídeo e pelo canal! Ganhou um inscrito hehehe Abraço!
+Frederico fioretto tente colocar o texto como posicionamento absoluto, ou inserir um z-index para trabalhar a relação entre várias divs, ou seja, coloque um z-index menor para o vídeo e um maior para o texto. Espero te ajudado. Grande abraço. ;)
Puts, bom demais!
Tava quebrando a cabeça com isso faz um bom tempo, usando tags que eu nunca vi, webkits e até frameworks. Você resolveu meu problema com meia dúzia de tags e algumas linhas em CSS.
Continua trazendo esse tipo de vídeo, excelente qualidade!
Davi Martins Obrigado pelo apoio. Forte abraço, amigo. ;)
fiz exatamente os passos que voce fez, porem o video aparece travado no inicio. Ele aparece mas não funciona o autoplay, mesmo colocando (autoplay="true"). O que fazer?
Parabéns pelo vídeo, quero fazer apenas uma correção, onde você fala da propriedade background-cover, na verdade o nome da propriedade é background-size com valor cover.
Caralho cara, acabei de conhecer seu canal, é completo! Tem tudo velho...
O que é mais estranho pra mim é que não roda nos meus navegadores nem um... nem o Google Chrome.. nada. Alguém sabem dizer se há alguma restrição ?
Boa noite.
Estou inserindo um video seguindos os passos do video mas preciso que ele rode no celular o qual não acontece.
Alguem sabe porque ?
Todos os celulares não estao rodando o video.FIca a tela de inicio sem as opcoes de botoes a qual desabilitei mas o video fica parado.
Uma dúvida, e se eu por questão de desempenho quiser ao invés de um vídeo, servir ao usuário uma imagem quando ele estiver no celular ou tablet, como devo fazer?
Bruno Santos você pode utilizar media queries, ou gerar imagens de alta performance utilizando o picture. Dê uma olhada nesse artigo: tableless.com.br/imagens-responsivas-de-alta-performance/ :) Abraços!
Ferreira Studios legal cara, vou dar uma pesquisada sim, e se eu quiser centralizar o texto que está acima do vídeo? Pois depois que colocamos position absolute, a propriedade margin: 0 auto; não funciona mais?
Bruno Santos você pode utilizar a propriedade table-cell e utilizar o vertical-align:middle... ;)
+Bruno Santos pode usar o translate tb
top: 50%; left: 50%;
background-color:#fff; opacity: 0.4;
width: 50%; text-align: center;
border: solid 4px #cecece; -webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
Fala galera, preciso saber como exportar o video na melhor qualidade possivel para que o site rode tranquilamente em qualquer dispositivo, vocês tem sugestões? Não acho nada quanto a isso na net, só como colocar o video-bg no website, igual a aula de vocês. Isso porque tenho visto alguns videos-bg que ficam muito ruins mesmo, muito pixelado. Valeu
+felipe santos você tem que estar ciente dos formatos suportados pelos navegadores, confira em: www.html5rocks.com/pt/tutorials/video/basics/
Simples e objetivo. Mas como saber qual o tamanho ideal do vídeo para que não demore muito no carregamento e nem perca muita qualidade?
+Josias Pereira Bueno isso pode variar de device para device, o ideal é você criar várias versões e fazer um request dependendo do tamanho da tela do usuário.
olá Ferreira boa excelente aula.
Porém aqui eu fiz tudo certo,mas o meu vídeo não está centralizado ELE INICIA COM UM ZOOM .
Quando aperto CTRL (-) no teclado , o video só aparece certinho quando alcanço 30% de - zoom
.background: {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
background-size:cover;
}
esse código CSS q enviei ,eu já acertei tinha colocado (.) em vez de # e os 2 pontos de pois do background.
MAS ainda tem o msm erro
Cara tudo bem? Ótima aula! Eu estou com um problema nessa situação. Adicionei um video como background somente em mp4. No desktop esta funcionando perfeitamente porém quando abro no no celular IOS por exemplo, ele nao escuta e aparece o botão de play padrão do IOS. Li alguns artigos sobre e dizem que a apple por padrão desabilita o autoplay por causa de pacote de dados. Sabe algo sobre? vou tentar exatamente da forma como você explicou nessa aula! Muito Obrigado!
o background cover ou
nem os 3 tipos de backgrouns-size ele corta a minha imagem
Quanto mais pesquiso mais aprendo =D bom demais
Amigo como faz para por no blogger tem algum video aula ensinando?
Tenho duas dúvidas:
1 - Na w3schools fala que "o atributo de reprodução automática(autoplay) não funciona em dispositivos móveis como iPad e iPhone.". Tem alguma solução sem ser o autoplay?
2- Ao testar a responsividade do vídeo em dois Smartfones diferentes, no iphone 4s carregou normalmente mediante o clique no play pelo motivo citado acima, mas o outro smartfone moto g4 nem se quer o vídeo apareceu. Alguém pode me ajudar?
?
bom dia!primeiramente parabéns boa aula
agora pode me tira duvida?como coloco meu site padrão para abrir em todos tamanhos de tela?
usando o design responsivo?não consigo implementar
+Claudinei Machado estamos desenvolvendo uma aula especial para isso. Em breve, estaremos disponibilizando. Grande abraço. :)
Bom vídeo, mas a trilha sonora distrai (atrapalha).
Amigo, muito obrigado pela vídeo aula! Ajudou bastante no aprendizado sobre responsividade. Agora uma dúvida: meu chrome não reconheceu esta propriedade background-cover e não encontrei documentação sobre. Saberia me informar o por quê?
É porque esta errado mesmo. Acho que a pessoa do vídeo foi copiar de alguém e tentou repassar ou não entende muito bem de CSS mesmo. Tanto que está em vermelho ali, mas ela nem se da conta. Você pode usar nestes casos o object-fit: cover;
Muito bom o video!
Só uma dúvida. Tem como eu fazer uma imagem responsiva, e aplicar uma animação nela?
O bg pe uma imagem que deveria ficar indo pro lado sempre, e ser responsivo. Mas quando aplico a responsividade(essa palavra? O.o) a animação deixa de funcionar.
Djonathan Rafael Krause nunca trabalhei com animações diretamente em backgrounds. Nem mesmo a documentação da W3schools fala nada sobre a utilização da propriedade animation para background-image (Confira em: www.w3schools.com/cssref/pr_background-image.asp). Vou procurar saber mais sobre, e te falo. Forte abraço ;)
Ferreira Studios Eu usei isso pra animar o bg
@keyframes bgAnimado
from { background-position: 0 350; }
to { background-position: 100% 350; }
animation: bgAnimado 120s linear infinite;
-ms-animation: bgAnimado 120s linear infinite;
-moz-animation: bgAnimado 120s linear infinite;
-webkit-animation: bgAnimado 120s linear infinite;
To iniciando com front-end. E seu canal é muito bom. Parabéns e vlw pelo help ;)
Qual melhor formato pra Web? Mp4 ou WebM ?
as far as i know, webm is the best, BUT, there are no software to edit it, and theres the compatibility problems with mobile devices. I hope this help you to resolve your problem. :)
iktan creativo thank you! helped me alot!
no problem bro! ;)
Tem algum vídeo explicando como deixar um rodapé responsivo ??
+Link o Paladino em janeiro teremos uma série especial sobre como construir um layout responsivo. .;)
+Ferreira Studios ® Olá boa tarde, tem uma forma do vídeo do youtube fica responsivo, tipo ja tenho o site e coloquei o vídeo porem não fica responsivo ?
Valeu, gostei muito do Seu Vídeo Parabéns !
Cara, parabéns pelo vídeo. Só uma dica: coloca a musica de fundo um pouco mais baixa. Não consegui concentrar na aula. Abraço.
Parabéns amigo , não entendo muito de html , mas fiquei impressionado , este vídeo responsivo seria bom para uma e commerce , no caso ficaria pesado ? apartir de hoje ganhou mas um aprendiz , vou estudar muito com seus videos . obrigado !!!
cara vc é demais, parabéns pelo canal
Muito bom eu não sabia que era tão simples, gostaria de saber se eu preciso criar um versão do vídeo menor para o smartphone e tablet, ou não vai ter problemas.
Por exemplo usuarios com internet 3g terão consumo maior de dados.
+cicero joceilton você pode criar um script, ou direcionar um formato de vídeo para ser lido de acordo com a media-query que está em execução.
Leonardo, como eu faço dessa forma? No desktop vai executar o vídeo normal. Quando eu abrir em um dispositivo mobile por exemplo irá abrir uma imagem no lugar do vídeo. Sou iniciante ainda.
Existe o atributo "muted" pro video pra quem não quiser o som.
+Vinícius Ferreira existe sim! Veja toda a documentação aqui: developer.mozilla.org/pt-BR/docs/Web/HTML/Using_HTML5_audio_and_video Abraços! ;)
O meu não da certo nem a pau, fiz teste com vários videos diferente e nada alguém pode me ajudar ?
Video Background
body { margin: 0px; background: black;}
header { height: auto; overflow: hidden; }
#background {position: fixed; right: 0; bottom: 0; min-width: 100%; min-height:100%; width: auto; height: auto; background-cover: cover; }
#content {position: absolute; top: 20px; padding: 30px; color: #fff; text-shadow: #000 2px 2px 2px; font-family: Arial;}
TITULO
Conteudo texto
:o wow! i was looking for this, thanks from México! nice video
Cara, brigadão, continue assim
É possível inserir vídeos do youtube?
+CGTI FIOCRUZ é sim! ;)
tem algum video que mostra como ?
Vai no video que vc quer, clica em Compartilhar -> Incorporar, depois pega o link dpois do src, e coloca ali na tag no lugar do link
Muito bom o tutorial, mas, gostaria de saber se com imagens funcionado mesmo jeito
Tales Breno funciona sim!
background-size: cover; não?
Sim, Gustavo! Eu add uma tag depois com a correção. :) Obrigado pela observação.
Muito bom, parabéns pelo trabalho. Mais um duvida, voce é o mesmo cara que trabalha com o Matheus do Brainstorm?
Sensacional seu vídeo. me ajudou muito, mas não funciona em dispositivos móveis? No iphone ficou com um sinal de play e no ipad como uma foto. Parabéns pelo seu canal! Muito bom mesmo!
estou com o mesmo problema.
Excelente explicação e muito fácil de seguir. Só uma ressalva: o w3schools não é de propriedade da w3c! A própria já tirou essa dúvida da galera.
***** What is your question? I try answer you...
***** Boa ressalva, eu não tinha visto o vídeo deles falando sobre. Pelo grau da documentação da w3, imaginava algum tipo de relação. Obrigado por contribuir. Forte abraço e continue nos acompanhando. ;)
Eu queria sabe onde você aprende tudo isso, conteúdo muito legal, parabéns pelo canal
Olá, Denilson! Procuro em várias fontes, muitas delas gringas. Leio vários livros, participo de fóruns... Mas, mais importante que tudo isso, vou treinando e aprendendo também na prática!
Se vc tiver algum assunto que tem dúvida, pode mandar como sugestão para os próximos vídeos! Abraços!
Se você pudesse me passar algum fórum em que você aprende e me recomendar algum livro vou ficar muito grato, sou desenvolvedor web e design gráfico, mais seus trabalhos são incríveis, vlw por responder!
e qual a tag para retirar o som?
Thiago Brunet Basta utilizar o método pause(). Verifique na documentação: www.w3schools.com/tags/ref_av_dom.asp Abraços
Olá acabei de me inscrever no seu canal, gosto muito dos seus vídeos, e quero dar uma sugestão. Faz um vídeo ensinando como deixar o Scroll Infinito acompanhado de um botão carregar mais.
Procurei no youtube mais não achei ninguém explicando do 0, tenho certeza que será muito visualizado.
bem legal......vou testar com foto,so que a tag tem q ser div
+Link o Paladino cara que Deus te abençoe muito.......eu tava botando a imagem pelo CSS....tava ficando tudo cagado quando abria meu TCC em tela de 21polegadas ou em resolução para smartphone.
+Link o Paladino que bom que deu certo. Continue nos acompanhando meu amigo. Grande abraço. ;)
vlww...consegui resolver :3
E ae cara, blz?? Eu estou usando um plugin para wordpress chamado optimizepress, fiz o que vc fez e deu certo. Só tem um problema, se eu coloco um texto ou um título o vídeo fica na frente. Você tem ideia do que pode ser?
Parabéns pelo vídeo e pelo canal! Ganhou um inscrito hehehe Abraço!
+Frederico fioretto tente colocar o texto como posicionamento absoluto, ou inserir um z-index para trabalhar a relação entre várias divs, ou seja, coloque um z-index menor para o vídeo e um maior para o texto. Espero te ajudado. Grande abraço. ;)
Muito bom!
muito bom o vídeo, vlw!
Thank you!