Ojo que existen muchas formas para lograr hacer esto, yo les quiero compartir una manera para hacer sensible los archivos tipos Embed, Iframe, Object y SWF, para que lo apliquen a sus paginas webs.
Solo usare CSS puro y lo bueno que funciona en navegadores antiguos.
Comencemos:
Colocamos en nuestro HTML lo siguiente para cada tipo de formato:
IFRAME SENSIBLE
Código HTML :
</head> <body> <div id="wrapper"> <div class="contenedor"> <iframe src="http://player.vimeo.com/video/6405380" width="500" height="375" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen> </iframe> </div> </div> </body>
EMBED SENSIBLE
Código HTML :
</head> <body> <div id="wrapper"> <div class="contenedor"> <embed src="http://www.youtube.com/v/jqpYQ7H0Ms0&hl=en&fs=1&color1=0x5d1719&color2=0xcd311b&border=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="349"> </embed> </div> </body> </html>
OBJECT SENSIBLE (Lo trabaje en Dreamweaver por eso se ve demasiado código, si quieres lo puedes trabajar en otro IDE o editor de codigo que desees)
Código HTML :
<body>
<div id="wrapper">
<div class="contenedor">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="342" height="291" id="archivoFLV">
<param name="movie" value="FLVPlayer_Progressive.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Halo_Skin_3&streamName=../../flv/joe_arroyo_peruano&autoPlay=false&autoRewind=false" />
<param name="swfversion" value="8,0,0,0" />
<!-- Esta etiqueta param indica a los usuarios de Flash Player 6.0 r65 o posterior que descarguen la versión más reciente de Flash Player. Elimínela si no desea que los usuarios vean el mensaje. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- La siguiente etiqueta object es para navegadores distintos de IE. Ocúltela a IE mediante IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="342" height="291">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Halo_Skin_3&streamName=../../flv/joe_arroyo_peruano&autoPlay=false&autoRewind=false" />
<param name="swfversion" value="8,0,0,0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- El navegador muestra el siguiente contenido alternativo para usuarios con Flash Player 6.0 o versiones anteriores. -->
<div>
<h4>El contenido de esta página requiere una versión más reciente de Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtener Adobe Flash Player" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</div>
<script type="text/javascript">
swfobject.registerObject("archivoFLV");
</script>
</body>
</html>
SWF SENSIBLE (ANIMACION FLASH)
Código HTML :
</head>
<body>
<div id="wrapper">
<div class="contenedor">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="860" height="460">
<param name="movie" value="swf/animacion.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
<!-- Esta etiqueta param indica a los usuarios de Flash Player 6.0 r65 o posterior que descarguen la versión más reciente de Flash Player. Elimínela si no desea que los usuarios vean el mensaje. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- La siguiente etiqueta object es para navegadores distintos de IE. Ocúltela a IE mediante IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="swf/animacion.swf" width="860" height="460">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- El navegador muestra el siguiente contenido alternativo para usuarios con Flash Player 6.0 o versiones anteriores. -->
<div>
<h4>El contenido de esta página requiere una versión más reciente de Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtener Adobe Flash Player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>Ahora entre nuestras etiquetas <head> </head> llamamos a nuestra hoja de estilos CSS que esta en otro archivo:
NOTA: El resto de código que vemos entre nuestras etiquetas <head> </head> lo genero el Dreamweaver, si desea lo trabajan con otro IDE ya que al final lo que va lograr la Sensibilidad va ser el CSS.
Código HTML :
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sensible SWF</title> <link href="css/estilos.css" rel="stylesheet" type="text/css" /> <script src="Scripts/swfobject_modified.js" type="text/javascript"></script> </head>
Ahora en nuestra hoja de estilos CSS colocamos nuestras propiedades CSS que son las siguientes:
Código CSS :
#wrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.contenedor iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.contenedor object {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.contenedor embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}LISTO, eso es todo !
Ahora les dejo unas demos en donde puedes ver como queda, para cada tipo objeto a continuación:
EMBED SENSIBLE:
http://jrcl.16mb.com/tutoriales/video_sensible/embed.php
IFRAME SENSIBLE
http://jrcl.16mb.com/tutoriales/video_sensible/iframe.php
OBJECT SENSIBLE
http://jrcl.16mb.com/tutoriales/video_sensible/object.php
SWF SENSIBLE
http://jrcl.16mb.com/tutoriales/video_sensible/swf.php
Puedes adaptarlo a tu web del modo que quieras, eso depende de ti.
Si bien Flash esta muriendo, pero los videos aun estan siendo visualizados en Flash en las plataformas de video como youtube, vimeo, etc.
Muchas Gracias !
