24 de nov. de 2012

Box em Vídeos

Box em Vídeos
Galera hoje venho ensinar a colocar um efeito box em vídeos, é bem simples de instalar e fácil de editar, confiram a Demo abaixo:



1º Vá em Design >> Editar HTML >> procure por:

]]></b:skin>
Acima dela adicione o seguinte css:

#box iframe {
width: 400px; /* Edite a largura */
height: 300px; /* Edite a altura */
background: #333; /* Edite a cor de fundo */
padding: 8px;
display: block;
box-shadow: #000 0px 10px 20px; /* Edite a cor da sombra e a quantidade */
}

Agora pegue o HTML do vídeo do YouTube, e coloque entre ele uma div, ficando assim:

<div id="box">

<iframe width="400" height="300" src="http://www.youtube.com/embed/B-v-3SSgdQ8?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>

</div>
Essa parte destacada seria o HTML do seu vídeo.

NOTA: Você pode usar esse efeito em qualquer vídeo, basta você identificar que no HTML do vídeo logo no início vem a tag iframe, se vier outra tipo Object, é só ir la no css da div box e colocar a tag object no lugar da inframe,ficando assim:

#box object {
width: 400px; /* Edite a largura */
height: 300px; /* Edite a altura */
background: #333; /* Edite a cor de fundo */
padding: 8px;
display: block;
box-shadow: #000 0px 10px 20px; /* Edite a cor da sombra e a quantidade */
}
É isso ai espero que tenham gostado.

Nenhum comentário:

Postar um comentário