<Youtube Video Click Blocker ⁄ >

11676

2008-06-01

mySnippets css

Download

Bookmark This

Bem, o titulo do snippet é mais um titulo pomposo que outra coisa :-D, visto que a finalidade é somente tentar demonstrar uma possivel maneira de sobrepor uma imagem sobre um objecto flash.

Finalidade disto? Humm, bem, é capaz de haver alguma, somewhere, sometime, talvez alguém queira utilizar para por ex. proteger o click sobre um swf, tal como o youtube.

Neste exemplo apenas é "bloqueado" o click no video (como sabem ao clicarmos na zona do video somos reencaminhados para a página do youtube onde podemos visualizar o mesmo video, bem como aceder a outros), ou seja a zona dos controlos (play e barra do tempo) funcionam correctamente, porém a parte do volume deixa de ser acedivel, visto que a barra de volume expande-se para cima, o que vai incidir sobre a área "protegida", de qualquer das formas cá fica o exemplo.

Utilizei o SwfObject v1.5, mas é compativel com qualquer outra versão, bem como podemos usar a tag <object>.

Só existe um pequeno pormenor, teremos de activar a opção wmode=transparent

Basicamente o truque é usar o célebre pixel.gif/spacer.gif e o posicionamento no CSS.

Como disse de inicio só usei o exemplo do youtube para mostrar algo prático, visto que poderá ser usado noutro tipo de situações, nem encorajo alguém a fazer isto com os videos do youtube ^_^''

- style.css;

div#youtube_video{
  width: 425px;
  height: 355px;
}
 
div#youtube_video div#youtube_video_blocker{
  position: absolute;
  width: 425px;
  height: 318px;
}
 
div#youtube_video div#youtube_video_blocker img#youtube_img_blocker{
  width: 100%;
  height: 100%;
}

- index.htm;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Youtube VideoClick-Blocker</title>
  <link href="style.css" rel="Stylesheet" type="text/css" />
  <script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
 
  <div id="youtube_video">
 
    <div id="youtube_video_blocker">
      <img src="spacer.gif" id="youtube_img_blocker" alt="no_click_please" title="no_click_please" />
    </div>
 
    <div id="youtube_video_content">
      <script type="text/javascript">
        var so = new SWFObject("http://www.youtube.com/v/XKOwGffqlbM", "mymovie", "425", "355", "7");
        so.addParam("wmode", "transparent");
        so.write("youtube_video_content");
      </script>
    </div>
 
  </div>
 
</body>
</html>

nota: só consegui testar este código em plataformas Windows, não sei se funciona correctamente no MacOSX ou Linux

Qualquer erro/ dúvida é só dizer!

11676

2008-06-01

mySnippets css

Download

Bookmark This