Colocar vídeo no fundo do site - Parte 02

27/08/2017

Na aula de hoje vamos finalizar a inserção do vídeo no fundo do nosso site trabalhando no código.

HTML

Vamos usar a tag video no nosso html:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Inserir vídeo no fundo do site</title>
    <link rel="stylesheet" href="stylesheet.css">
</head>

<body>
    <div class="slide">
        <div class="slideVideo">
            <video autoplay loop poster="video_poster.jpg">
                <source src="video.webm" type="video/webm">
                <source src="video.mp4" type="video/mp4">
            </video>
        </div>

        <div class="slideTexto">
            Olá Mundo!
        </div>
    </div>

    <script src="jquery.js"></script>
    <script src="javascript.js"></script>
</body>
</html>

CSS

Vamos estilizar nosso projeto assim:

@charset "utf-8";
*{margin:0; padding:0; box-sizing: border-box;}

.slide{float:left; width: 100%; height: 300px; overflow: hidden;}
    .slideVideo video{width: 100%; }
    .slideTexto{position: absolute; width: 100%; text-align: center; top:200px color: #fff; font-size: 50px; font-weight: bold; }

Javascript

Por fim vamos usar o JQuery para expandir nossa div para toda a tela.

$(document).ready(function(){
   var heightTela=$(window).height();
   $('.slide').height(heightTela);
});

�? isso aí. Sucesso nos códigos e na vida!

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Colocar vídeo no fundo do site - Parte 01

O tutorial de hoje é de como colocar um vídeo no background do seu site. Vamos realizar o desenvolvimento desde a edição do vídeo até a inserção do código.

Criando um botão mobile com HTML5, CSS e JQuery

Nesta vídeo aula aprenderemos a criar um botão mobile para ser utilizado em dispositivos móveis. Realizaremos desde a criação da imagem até o código.

HTML5

HTML5 é a linguagem de marcação da codificação do website. Em claro português, HTML é a base em que virão todos os outros os códigos que farão a composição do website