| 16.04.2015
No ano passado, os web designers cada vez mais adotaram uma maneira engenhosa de animar um site - definindo um vídeo como plano de fundo da página. Um enredo interessante ou apenas uma imagem "ao vivo" no fundo vai decorar até mesmo um site de cartão de visita comum, vai interessar o usuário e encorajá-lo a permanecer no site por mais tempo. Hoje vamos compartilhar com vocês uma das maneiras de definir um fundo de vídeo em tela cheia para um site usando HTML5 e CSS.
Se você está firmemente convencido de que deseja definir um vídeo como plano de fundo no site, existem algumas nuances que você deve conhecer:
- Primeiro, lembre-se de que o vídeo tem muito peso. Isso pode afetar negativamente a velocidade de carregamento da página, especialmente se o usuário tiver uma conexão lenta com a Internet. Portanto, escolha vídeos que não sejam muito longos. No caso de precisar usar um vídeo bastante longo, esteja preparado ou para trabalhar na redução de seu peso, ou para o fato de que terá que sacrificar parte do público.
- Em segundo lugar, evite a reprodução automática de áudio de vídeo. Use vídeos sem áudio ou adicione a capacidade do usuário de ligar o som sozinho, se precisar. É considerado péssimo modo de reproduzir automaticamente um som ao abrir um site.
- Em terceiro lugar, você precisa cuidar da compatibilidade entre navegadores e da exibição e reprodução correta do vídeo em todos os dispositivos, bem como fornecer uma alternativa ao vídeo (para aqueles casos, se ele não for reproduzido). Abaixo, em nosso exemplo, mostraremos como fazer isso.
- E em quarto lugar, vale a pena pensar bem se um videofone é adequado ao local onde se pretende instalá-lo, pois é muito fácil cruzar a linha entre a originalidade e a inutilidade deste empreendimento. O vídeo não deve, de forma alguma, desviar o usuário de seu objetivo principal, razão pela qual ele veio ao site. Ao definir um fundo de vídeo abaixo do conteúdo do texto, certifique-se de verificar o quão legível o texto se tornou. Por exemplo, ele pode se fundir com o plano de fundo em um determinado ponto da reprodução do vídeo (texto branco em um fundo branco, preto em preto, etc.).
1. HTML
Para nosso exemplo, gravamos um vídeo com resolução de 1920 × 1080, 15 segundos de duração e pesando pouco mais de 3 MB. Dentro do bloco
Para tag
- largura - a largura da área para reproduzir o vídeo;
- height - a altura da área;
- autoplay - reprodução automática de vídeo;
- loop - vídeo em loop;
- pôster - uma imagem que é exibida em vez de um vídeo durante o carregamento ou não está disponível.
Em seguida, escrevemos duas tags
2. CSS
Nossa folha de estilo de plano de fundo tem a seguinte aparência:
# video-bg (position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: 1; background: url (bg / daisy-stock-poster.jpg) não -repetir # 94a233; background-size: cover;) # video-bg> video (posição: absoluto; topo: 0; esquerda: 0; largura mínima: 100%; altura mínima: 100%; largura: automático; altura : auto;) @supports (ajuste ao objeto: capa) (# video-bg> video (topo: 0; esquerda: 0; largura: 100%; altura: 100%; ajuste ao objeto: capa;))
Como você pode ver no código, o plano de fundo é definido para a página inteira e uma imagem (um quadro do mesmo vídeo) é definido como um plano de fundo reserva. Como último recurso, a cor de fundo # 94a233 será usada.
O código também contém a diretiva @supports, que verifica se o navegador oferece suporte à propriedade de ajuste de objeto. Nesse caso, o plano de fundo é definido como cobertura e é exibido proporcionalmente em diferentes tamanhos de tela.
De acordo com caniuse.com, a propriedade object-fit é atualmente compatível com todos os navegadores, exceto Internet Explorer, Firefox 31-35, safari 7, iOS Safari 7.1 e Android Browser 4.1-4.4.
Vídeos grandes no fundo de sites são uma tendência bastante popular em web design. Vídeos habilmente aplicados podem tornar um site mais dramático e envolvente para os usuários.
Além disso, os fundos de vídeo podem ser reproduzidos sem problemas e sem "freios", ao contrário dos fundos criados com JavaScript, que exigem o carregamento de determinados códigos e imagens antes que o usuário veja o resultado da animação.
Existem empresas como a Powerhouse ou a Adidas que usam o vídeo como pano de fundo de um site para transmitir uma mensagem ou história específica sobre um produto ou serviço ao usuário.
Embora a forma mais popular de criar um fundo de vídeo seja usando HTML5 vídeo juntamente com alguns parâmetros CSS, você também deve prestar atenção a fontes alternativas de vídeo, por exemplo, YouTube. Nesse caso, você não precisa se preocupar com a lentidão da resposta do servidor, pois a solicitação será enviada diretamente para o YouTube.
Neste artigo, vou mostrar como você pode construir um site legal que usa vídeos do YouTube como pano de fundo. Estaremos usando jQuery.mb.YTPlayer.js para editar e controlar a aparência de nosso vídeo. Então vamos começar!
Fontes de download
Demo
Você vai precisar de:
// Big Background Content aqui
Agora você precisa preencher cada seção com conteúdo. Nas seções de plano de fundo grande e pequeno, coloque a classe padronizar, para criar uma textura leve em nosso vídeo. Você também precisa adicionar h1, h2, parágrafo e botão.
YOUTUBE
VÍDEO DE FUNDO
Eu quero aprender issoColoque qualquer vídeo do YouTube no plano de fundo do site
Quer saber como adicionar vídeo ao plano de fundo do seu site?
É tão fácil quanto descascar peras! Com o jQuery MB.YTPlayer, um plugin jQuery, você pode inserir qualquer vídeo do YouTube no fundo do seu site.
Você pode facilmente transformar qualquer vídeo em um plano de fundo HTML. Sem atrasos no carregamento da página e do servidor!
Somos das redes sociais
Usei a fonte Font Awesome para os ícones sociais, que estão localizados na seção seção de fundo pequeno... Então vamos adicionar um modelo para o nosso vídeo usando o plugin jQuery.mb.YTPlayer. Coloque o seguinte código logo após .
Aqui está o que usamos para personalizar o vídeo:
- classe jogador- esta classe é usada pelo plugin mb.YTPlayer
- URL do vídeo- link para o vídeo
- contenção- Seletor CSS para reproduzir o vídeo
- Reprodução automática- reprodução automática de vídeo
- mudo- a presença de som
- Começa ás- a hora de começar a reproduzir o vídeo
- opacidade- transparência do vídeo
CSS
Vamos adicionar estilos ao nosso site. Em primeiro lugar, vamos definir a aparência do html, corpo, tags de parágrafo e lista com marcadores.Html (altura: 100%) corpo (fonte: 15px / 23px "Raleway", sem serifa; margem: 0; preenchimento: 0; altura: 100%; largura: 100%; -webkit-font-smoothing: suavização; - webkit-text-size-Adjust: 100%) p (font-size: 20px; line-height: 140%; text-align: center) ul li (display: inline-block; list-style: none; padding-right : 10px;)
Wrapper (z-index: 600; posição: relativa) .pattern (background-image: url (../ images / pattern.png); background-repeat: repeat; background-attachment: scroll; largura: 100%; altura: 100%; posição: absoluta; superior: 0; esquerda: 0) .divider (imagem de fundo: url (../ images / divider.png); exibição: bloco; largura: 300px; altura: 35px; margem: 10px automático ) #colorize (color: # f1c40f; font-family: "Lato", sans-serif; font-size: 40px)
É hora de estilizar a seção de fundo grande. Instalar z-index sobre 550 e parâmetro transbordar para oculto. Isso evita que o conteúdo do YouTube (legendas, anotações) seja exibido em nosso site. O resto dos estilos são necessários para os cabeçalhos, botões e a imagem padrão (mais sobre isso posteriormente).
Big-background (Z-index: 550; text-align: center; height: 100%; min-height: 100%; position: relative; overflow: hidden) .big-background .big-background-container (largura: 830 px ; largura máxima: 100%; exibição: bloco inline; posição: absoluta; superior: 50%; esquerda: 50%; -webkit-transform: translate (-50%, - 50%); -moz-transform: translate (-50%, - 50%); -ms-transform: translate (-50%, - 50%); -o-transform: translate (-50%, - 50%); transform: translate (-50%, -50%)) .big-background-title (font-family: "Raleway", sans-serif; font-size: 78px; color: #fff; font-weight: 300; text-transform: uppercase; text-align : center; margin-bottom: 22px; padding-top: 20px; display: inline-block; background-attach: scroll; background-repeat: repeat-x; background-position: top center) a.big-background-btn ( font-family: "Lato", sans-serif; font-size: 13px; text-transform: maiúscula; text-decoration: none; color: #fff; background: transparent; border: 2px solid #fff; padding: 10px 14px ; cursor: ponteiro; espaçamento entre letras: 2px; alinhamento de texto: centro; display: bloco embutido; -webkit-transição: facilidade de fundo de .4s; -moz-transição: facilidade de fundo de .4s; -o-transição: facilidade de fundo de .4s; transição: facilidade de fundo de .4s; ) .big-background-btn: hover (color: #fff; background: rgba (255,255,255,0.20)) .big-background-default-image (background: url (../ images / sunset.jpg); background-repeat : sem repetição; posição do fundo: centro central; tamanho do fundo: capa; largura: 100%; altura: 100%; índice z: 0; visibilidade da face posterior: oculto)
Agora vamos passar para a seção seção sobre... Vamos configurar o parâmetro cor de fundo para branco e preenchimento 60 px superior e inferior e 20 px à esquerda e à direita.
About-section (font-family: "Lato", sans-serif; color: # 7f8c8d; background: #fff; padding: 60px 20px) .about-section-container (text-align: center; padding-bottom: 50px) .about-section-title (font-family: "Raleway", sans-serif; font-size: 40px; background: #fff; color: # 3d566e; padding: 0 35px; margin-bottom: 22px; anexo de fundo: rolar; background-repeat: repeat-x; background-position: center; text-transform: maiúscula) a.about-section-btn (font-family: "Lato", sans-serif; font-size: 13px; texto -transformar: maiúsculas; decoração do texto: nenhum; cor: # 34495e; plano de fundo: transparente; borda: 2px sólido # 34495e; preenchimento: 10px 14px; cursor: ponteiro; espaçamento entre letras: 2px; alinhamento do texto: centro; exibição: bloco em linha; -webkit-transição: facilidade de fundo .4s; -moz-transição: facilidade de fundo .4s; -o-transição: facilidade de fundo .4s; transição: facilidade de fundo .4s;) .about-section-btn: hover (cor: #fff; plano de fundo: # 34495e;)
Para a seção de fundo pequeno, que também serve como rodapé, atribuiremos uma largura de 100% e o parâmetro transbordar para oculto. Também vamos adicionar alguns preenchimento superior e inferior para que nosso vídeo possa ser visto. Finalmente, vamos adicionar estilos para os botões de mídia social.
Seção de fundo pequeno (família de fontes: "Raleway", sans-serif; preenchimento: 100px 0; posição: relativa; largura: 100%; excesso: oculto). Contêiner de fundo pequeno (posição: relativa; alinhamento de texto : center) .small-background-title (font-size: 40px; color: # f1c40f; font-weight: 300; z-index: 10; display: inline-block; text-transform: maiúsculo; margin-bottom: 20px ; margin-top: 20px; position: relative; background-attachment: scroll; background-repeat: repeat-x; background-position: top center) .socials a (cor: #fff) .socials a: hover (cor: # bdc3c7)
Consultas de mídia
Para tornar nosso site responsivo, vamos adicionar algumas consultas de mídia.@media screen e (max-width: 768px) (.about-section-title (line-height: 1)) @media screen e (max-width: 480px) (.big-background-title (font-size: 58px ) .small-background-title (line-height: 1) / *. player (display: none;) -> Se você deseja remover o vídeo bg em uma janela de visualização específica sem o plugin * /) @media screen e ( largura máxima: 360px) (.big-background-title, # colorize (line-height: 1)) @media screen e (max-width: 320px) (.small-background-title (font-size: 30px))
jQuery
Agora vamos ligar nosso vídeo no YouTube. Vamos ligar para a classe jogador dentro do código jQuery. Coloque o seguinte código antes da tag de fechamento do corpo e dentro das tags .$ (function () ($ (". player"). mb_YTPlayer ();));
Opção de reserva
Vídeos de fundo do YouTube não serão reproduzidos em dispositivos móveis ou tablets, pois as políticas do YouTube não permitem isso.No entanto, podemos usar o jQuery para adicionar uma imagem de fundo padrão caso o navegador detecte que o usuário entrou no site a partir de um dispositivo móvel.
Solução manual
Para determinar se o usuário está conectado a partir de um dispositivo móvel ou tablet, podemos ocultar o elemento em um tamanho de tela específico. Por exemplo, queremos remover o fundo do vídeo em telas grandes de 480px. Você só precisa adicionar display: none ao elemento player:
@media screen e (max-width: 480px) (.player (display: none;))
No que diz respeito ao jQuery, aqui vamos definir uma variável is_mobile com o parâmetro false. Então, certifique-se de que a classe jogador tem display: nenhum parâmetros. Em caso afirmativo, adicione a classe big-background-default-image para seções fundo grande e seção de fundo pequeno para usar a imagem de fundo padrão. Caso contrário, nada mudará.
(function ($) ($ (document) .ready (function () (var is_mobile = false; if ($ (". player"). css ("display") == "none") (is_mobile = true;) if (is_mobile == true) (// Script condicional aqui $ (". big-background, .small-background-section"). addClass ("big-background-default-image");) else ($ (". jogador "). mb_YTPlayer ();)));)) (jQuery);
Solução com plugin jQuery
Outra maneira de definir a imagem padrão é com o plugin jQuery device.js(http://matthewhudson.me/projects/device.js/). Isso simplificará o processo de descrição das condições para diferentes tamanhos de tela de dispositivos móveis. Usando este plugin, podemos simplesmente escrever o seguinte código:(function ($) ($ (document) .ready (function () (//Device.js) irá verificar se é Tablet ou Mobile - http://matthewhudson.me/projects/device.js/ if (! dispositivo. tablet () &&! device.mobile ()) ($ (". player"). mb_YTPlayer ();) else (// jQuery adicionará o fundo padrão à classe preferida $ (". big-background, .small- background-section "). addClass (" big-background-default-image ");)));)) (jQuery);
Aqui eu usei os métodos device.mobile () e device.tablet () para verificar o dispositivo a partir do qual o usuário está conectado. Se a condição de que a classe for adicionada for atendida big-background-default-image para a seção fundo grande e seção de fundo pequeno... Caso contrário, a classe jogador permanecerá inalterado e o vídeo será reproduzido.
Nós colocamos em ordem
Os vídeos são uma ótima maneira de transmitir sua mensagem ao público. Pode ser uma ferramenta poderosa para o seu site, se usado corretamente.Tenho certeza de que, à medida que o web design se desenvolve e se aprimora, haverá cada vez mais ideias criativas para o uso de vídeo no design de sites. Espero que você tenha aprendido uma ou duas coisas neste tutorial. Escreva suas idéias e comentários nos comentários.
De um tradutor. Com todos os desejos e comentários a respeito da tradução, por favor, entre em contato comigo pessoalmente. Obrigado!
Como instalar um site em um monitor de desktop?
Provavelmente, a primeira coisa que qualquer usuário se cansa é de olhar para o papel de parede que está instalado na Área de Trabalho. Muitas pessoas olham constantemente para a imagem padrão por anos, mesmo que o sistema tenha sido reinstalado mais de uma vez. Todos os usuários ficam entediados rapidamente e procuram por imagens adequadas para a Área de Trabalho. Alguns usuários preferem papéis de parede animados. Eu sugiro que você defina a página inicial do seu site favorito como papel de parede (no entanto, qualquer página, é claro). Agora, nos dias de Internet ilimitada, isso às vezes é muito, muito conveniente para alguns, especialmente quando um computador ou laptop está constantemente conectado à rede. Em qualquer caso, não é uma opção ruim. Esse truque apareceu no Windows XP. Infelizmente, acabou aí. As tabelas interativas sumiram. Pessoalmente, foi muito interessante para mim acompanhar as atualizações dos sites de notícias on-line. Essa configuração de desktop seria útil para muitos usuários. Mas, novamente, os criadores das novas versões do Windows decidiram deixar a área de trabalho sem a capacidade de refletir uma página interativa. Honestamente, sinto muito. Pessoalmente, às vezes realmente perco essa oportunidade.
Mas vamos passar das palavras às ações. Instalando a página da web no desktop
- Clique com o botão direito em qualquer espaço livre na Área de Trabalho
- No menu adicional que aparece na área de trabalho, selecione o item Propriedades.
- Vamos selecionar a guia Desktop e clicar Personalização da área de trabalho ...
- No menu Elementos da área de trabalho, agora selecione a guia Rede e então clique no botão Crio... Bem, ou escolha um item Minha página inicial atual. O plano de fundo exibirá a página do site, que é definida como a página inicial no navegador padrão.
Na janela que aparece, basta inserir o endereço previamente copiado do seu site favorito da barra de endereços do seu navegador.
Feche as caixas de diálogo abertas sucessivamente, concordando com as alterações e clicando em OK. Agora, em vez de uma imagem enfadonha, você tem uma página do site de que gosta e, olhando o site no Desktop, pode acompanhar as mudanças na rede de forma interativa.
