Alguma vez você já quis redimensionar um "player de vídeo" dando-lhe “escala” como se fosse uma imagem? Usando o recurso CSS denominado "proporção intrínseca" para vídeo, você poderá fazê-lo. Esta técnica permite aos navegadores (browsers) determinar as dimensões de vídeo com base na largura de conteúdo do bloco respectivo. Com as dimensões intrínsecas, uma nova largura desencadeará um novo cálculo de altura, permitindo redimensionar os vídeos, dando-lhes a mesma capacidade de escalabilidade que as imagens. Mais: as páginas poderão ser validadas junto ao W3C uma vez que os documentos serão produzidos dentro dos padrões de acessibilidade respectivos.

O conceito

A idéia é criar uma caixa com uma proporção determinada (4:3, 16:9, etc) e, em seguida, fazer com que o vídeo que esta dentro da caixa "estique" para encaixar-se às dimensões respectivas.

Antes, contudo, vejamos como fazer para redimensionar uma imagem em função da janela de vídeo de cada usuário. Observe o exemplo 1.

Você deve ter observado que a imagem ocupa exatamente 50% (cinquenta por cento) da tela de seu monitor. Pois bem, experimente alterar o tamanho de sua janela. A imagem é redimensionada para ocupar, exatamente, metade da janela de seu monitor !!

Antes de prosseguir, observe o exemplo 2.

Como você pode perceber, é perfeitamente possível estabelecer uma dimensão inicial para a imagem, simplesmente definindo, arbitrariamente, uma largura para a janela de exibição. Complicou ? Observe o código CSS inline do exemplo 1:

<style type="text/css">

img {width: 50%;}
p {
font-family:verdana, arial;
text-align:justify;
}
</style>
</head>

Veja o código CSS inline do exemplo 2:

<style type="text/css">
body {
width:840px;
}
img {width: 50%;}
p {
font-family:verdana, arial;
text-align:justify;
}
</style>

Ao compará-los você perceberá que a única diferença é que no exemplo 2 há uma declaração a mais:

body {
width:840px;
}

Estes exemplos iniciais resumem os conceitos fundamentais abordados neste tutorial.

Como utilizar este recurso para vídeo

A propriedade CSS "padding" é a responsável pela “mágica” que cria estilos de caixa com uma relação intrínseca. Isso ocorre porque nós definimos um "enchimento" em percentagem, com base na largura da caixa de conteúdo.

As regras CSS abaixo ilustram como o estilo de pai-e-filho (conceito de herança) criam um "invólucro mágico", uma caixa (filho) que se redimensiona dependendo da largura do seu “pai”. Veja o exemplo 3:

. involucro-com-proporcao-intrinseca {

position: relative;

padding-bottom: 20%;

height: 0;

}

. elemento-esticavel {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: blue;

}

Vamos revisar as regras de cada declaração da classe .involucro-com-proporcao-intrinseca

position: relative;

Ao declarar “position: relative” todos os elementos "filho" vão posicionar-se em relação ao invólucro.

padding-bottom: 20%;

Esta declaração dá à caixa um formato específico. Utilizar 20% (vinte por cento) para enchimento faz com que a altura da caixa seja igual a 20% de sua largura.

Nós escolhemos, deliberadamente, utilizar padding-bottom ("enchimento" da parte inferior) ao invés de padding-top em função de um problema com o IE5, que remove o "espaço" criado através de padding-top do fluxo do documento. Assim, se utilizássemos "padding-top: 20%" iríamos criar o layout desejado, mas a caixa funcionaria como um elemento com posicionamento absoluto, sobrepondo-se aos elementos próximos no fluxo do documento.

height: 0;

Especificar uma altura "0" (zero) irá fazer com que, para os navegadores IE5 e IE6, as dimensões internas sejam mantidas.

Nota: porque IE5 e IE6 largura tratar como uma largura mínima, você não deve usar width: 100% para dimensionamento do layout. Isso faz com que a caixa se expanda para preencher seu "invólucro", em vez de respeitar a largura que estabelecemos para o recipiente.

Agora, vamos considerar cada declaração dentro do ".elemento-esticavel".

position: absolute;

Isso libera o elemento a partir da altura estabelecida ao seu "pai": o posicionamento do "elemento-filho" ocorrerá em função das “fronteiras" do "elemento-pai". Desta forma, ele poderá ser colocado sobre a área de enchimento (área "padding").

top: 0;

Nós definimos "top: 0;" para posicionar a perto do topo de seu pai (ele é a referência inicial).

left: 0;

Esta declaração posicionará o elemento do lado esquerdo do "elemento-pai".

width: 100%;

Esta declaração faz com que a caixa estique para preencher a largura do recipiente.

height: 100%;

Esta declaração faz com que a caixa preencha a altura do seu recipiente.

background: teal;

Nós aplicamos uma cor para destacar o layout da caixa.

Prática: aplicando o recurso

Neste exemplo utilizaremos um vídeo do YouTube (com a marcação YouTube), começando com a criação de uma caixa para inserí-lo. Note que a altura da imagem inicial (estática) de vídeo é de 25 pixels, independentemente das dimensões do vídeo. Nós também optaremos por alterar as dimensões para exibição do vídeo para o formato widescreen na proporção 16:9.

# containingBlock {

width: 50%;

}

. video-conteudo {

position: relative;

padding-bottom: 56,25%;

padding-top: 25px;

height: 0;

}

object,

embed {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

Agora vamos examinar cada um de nossos seletores e as respectivas declarações, a começar com #containingBlock:

width: 50%;

Este é apenas um container que criamos para demonstrar o redimensionamento vídeo baseado na largura da "janela". No exemplo anterior o "container" foi o próprio corpo do elemento.

Vamos agora ao seletor .video-conteudo:

padding-bottom: 56.25%;

Para criar uma relação 16:9, temos que dividir 9 por 16: o produto desta operação matemática é 0.5625 ou 56,25%.

padding-top: 25px;

Para evitar problemas com o navegador Internet Explorer (IE5 ou IE6), usamos "padding-top" em vez de "height" para criar espaço para a "imagem inicial".

Por fim, usamos os seletores object e embed porque, enquanto alguns navegadores invocam object (por exemplo, o Safari), outros precisam de embed (por exemplo, o Firefox).

Nota: Usaremos a "marcação" do YouTube por agora mas, ao final, utilizaremos uma "marcação" válida (de acordo com as recomendações do W3C), descartando o seletor "embed”.

A correção para o Internet Explorer

Para fazer este trabalho no Internet Explorer, basta adicionar um "container" extra (uma espécie de capa). Veja o exemplo 4:

# containingBlock {

width: 50%;

}

. video-conteudo {

position: relative;

padding-top: 25px;

padding-bottom: 56,25%;

height: 0;

}

* html. video-conteudo {

margin-bottom: 45px;

margin-bot \ tom: 0;

}

. video-conteudo div,

. video-conteudo embed,

. video-conteudo object {

position: absolute;

width: 100%;

height: 100%;

left: 0;

Top 0;

}

Vamos examinar detalhadamente os nossos novos seletores e declarações, a começar com o seletor .video-conteudo.

height: 0;

Como vimos em um dos exemplos anteriores, o IE5 e IE6 precisam de um "container".

Agora, vamos examinar o seletor *html .video-conteudo. Chamado de "estrela html hack", ele só faz sentido para o navegador IE6, uma vez que apenas essa versão analisará as seguintes declarações:

margin-bottom: 45px;

Como vimos no primeiro exemplo, o "enchimento" de topo encontra problemas com o IE5. Aqui, usamos um valor arbitrário (que deverá trabalhar com vários quadros) para compensar o "espaço" que perdemos usando padding-top. Isto serve para evitar que o vídeo se sobreponha aos elementos posteriores.

margin-bottom: 0;

É uma notação CSS de "escape" (o caracter "barra") no nome da propriedade que funciona como um filtro para definir um valor diferente para o IE6. Somente o IE6 "vê" a presente declaração, enquanto IE5 a ignora.Feitas tais considerações, se você preferir utilizar um comentário adicional ao invés do filtro acima, poderá fazê-lo sem qualquer contra-indicação.

Finalmente, a "div" que apresenta a classe .video-conteudo é o invólucro extra que precisamos para fazer as coisas funcionarem no Internet Explorer versões 5, 6 e 7.

Nota: Nós usamos .video-conteudo div, .video-conteudo embed, .video-conteudo object em vez de utilizar genericamente .video-conteudo, pensando em eventual "estilização" alternativa conteúdo.

Vamos melhorar este código

Para tornar esta solução mais versátil, removemos as declarações padding-top das regras anteriores e as associamos com "classes". Desta forma, podemos facilmente estilizar vídeos com diferentes proporções e/ou janelas de imagem. exemplo 5:

# containingBlock {

width: 50%;

}

.video-conteudo {

position: relative;

height: 0;

}

* html. video-conteudo {

margin-bottom: 45px;

margin-bot \ tom: 0;

}

. video-conteudo div,

. video-conteudo embed,

. video-conteudo object {

position: absolute;

width: 100%;

height: 100%;

left: 0;

top: 0;

}

. WideScreen {

padding-bottom: 56,25%;

}

. fourBYthree {

padding-bottom: 75%;

}

. chrome_25 {

padding-top: 25px;

}

. chrome_35 {

padding-top: 35px;

}

Vamos dar uma olhada em nossas novas "classes" a começar com “.wideScreen”:

.wideScreen

Usamos esta classe para definir a proporção de 16:9.

.fourBYthree

Usamos esta classe para definir uma proporção de 4:3.

.chrome_25

Esta classe define que a "janela inicial" terá 25 pixels de altura.

.chrome_35

Esta classe define que "janela inicial" terá 35 pixels de altura.

A questão da validação W3C

Quando se trata de vídeo, não é tão simples enquadrar-se às recomendações "standard" da Web.Primeiro, a maioria dos URL's de vídeos não codificam corretamente o "e" comercial (ampersand). Depois, normalmente fazem uso do elemento "embed" (que não atende aos web-standards).

Para iniciar o processo de validação a primeira coisa a fazer é substituir todos os & (ampersands ou "es" comerciais) da URL do vídeo respectivo, por "&amp". Em seguida, vamos implementar um método "único-objeto". Veja no exemplo abaixo como esta técnica de "feeds" utiliza como agente de usuário, apenas um único-objeto:

<div id="containingBlock">

<div class="video-conteudo">

<div>

<!--[if IE]>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" »
width="480" height="295"> <param name="movie" value="http://www.youtube.com/v/mDRYnaajUcY »
&amp;hl=en&amp;fs=1&amp;showinfo=0" /> <![endif]--> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="http://www. »
youtube.com/v/mDRYnaajUcY&amp;hl=en&amp;fs=1&amp;showinfo=0" width="480" »
height="295"> <!--<![endif]--> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <p><a href="http://www.adobe.com/go/getflashplayer"><img alt= »
"Get Adobe Flash player" src="http://www.adobe.com/images/shared/ »
download_buttons/get_flash_player.gif"/></a></p> </object> </div> </div> ... </div>

A técnica do único-objeto facilita a geração de um código como o "forking" é feito em um único local <object> em vez de dois lugares <object> e </object>

O bônus

Em razão de termos um elemento com posicionamento absoluto dentro da caixa, podemos esconder o conteúdo "atrás" do vídeo.

Nota: este conteúdo está fora do objeto. Não é "alternativa conteúdo", por si só. Veja o exemplo:

<div id="containingBlock">

<div class="video-conteudo">

<div>

<!--[if IE]>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" »
width="480" height="295"> <param name="movie" value="http://www.youtube.com/v/ »
mDRYnaajUcY&amp;hl=en&amp;fs=1&amp;showinfo=0" /> <![endif]-->

<!--[if !IE]>--> <object type="application/x-shockwave-flash" data="http://www. »
youtube.com/v/mDRYnaajUcY&amp;hl=en&amp;fs=1&amp;showinfo=0" width= »
"480" height="295"> <!--<![endif]-->

<param name="quality" value="high" />

<param name="wmode" value="opaque" />

<p><a href="http://www.adobe.com/go/getflashplayer"> <img »
alt="Get Adobe Flash player" src="http://www.adobe.com/images/shared/ » download_buttons/get_flash_player.gif"></a></p>

</object>

</div>

<p>A seguir vem uma descrição do video que sera exibido neste document.</p> <p>This short clip is about YouTube widescreen formatting. It
shows the two main formats (16:9, 4:3) and also explains the best way
to create a Flash movie according to the new widescreen format.</p>

</div> ...

</div>

Abordagem sobre o script SWFObject

Para automatizar este método, podemos usar o script para adicionar a "classe" .video-conteudo que nós precisamos para estilização e também para servir como "capa" (container) para o IE. Ver este exemplo: (Nota: neste último exemplo, a largura do bloco é definida em em s.)

Para adicionar o código que precisamos, nós substituiremos a seguinte linha na SFWObject v1.5 (na altura da linha 100):

n.innerHTML = this.getSWFHTML();

Em seguida acrescentaremos as linhas de código a seguir:

n.className += " video-conteudo";

if(typeof document.documentElement.style.zoom != "undefined"){

var wrapper4ie = document.createElement("div");

n.appendChild(wrapper4ie);

wrapper4ie.innerHTML = this.getSWFHTML();

}else{

n.innerHTML = this.getSWFHTML();

};

O resultado pode ser visto no exemplo 5. Isto resume todo o processo. Com um pouco de CSS e alguns poucos artifícios, você poderá redimensionar e dar escalabilidade a vídeos com precisão.