Cultura Digital#Blog

Desde hace un tiempo se ha convertido en una necesidad incrustar algún vídeo del omnipresente YouTube en cualquier sitio web que se precie, sobretodo los blogs, el boom del contenido multimedia ha sido espectacular, tanto es así que, como ya sabemos, google no pudo más que comprar a YouTube y abandonar (practicamente) su google video.

De esta manera y al margen de los detractores de YouTube, que los hay, no deja de ser algo un poco… vergonzoso? que YouTube (y otros servicios parecidos) siga generando un código no estándar para el W3C por ejemplo con el uso de la etiqueta (tag) para contenido multimedia incrustado, propietaria de Netscape, <embed> ya obsoleta y destinada a morir.

A muchos, como los de YouTube, les da igual esto y siguen abogando por una web funcional por encima de todo… la web está cambiando, se está pasado de un marcado HTML basura, de código propietario, a un marcado Web2.0 nuevo… pero nuevamente basura. Si antes el flash (Macromedia Flash) inundaba los sitios sobretodo artísticos y multimedia ahora es JavaScript… y no se me entienda mal, no digo que JavaScript no sea estándar (ECMAScript) o válido… de hecho, se puede decir que es un estándar, pero hablo de JavaScript “no válido” o JavaScript que genera marcado basura o JavaScript inaccesible tan típico: <a href="javascript()"> o la NO inclusión del <noscript></noscript>.

El problema de la incipiente Web2.0 con su AJAX y DOM, es cuando por ejemplo se usan estilos incrustados en nuestros elementos HTML en lugar de usar CSS… esto es demasiado común y lo más evidente es que es muy muy difícil de mantener un código de ese tipo… y yo lo hago ggg, casi siempre por prisas
Usar CSS puede parecer una pérdida de tiempo pero a la larga es rentable… entonces suele ocurrir que se coge el camino corto que a la larga… es largo gg

Pero bueno, cada cual con su conciencia, muchos de estos sitios ya serán dificiles de mantener dentro de poco y volveremos al eterno debate y a las lapidarias palabras de los gurús de la web, como Zeldman, en una nueva cuestión.

Arreglemoslo

Siendo así… aquellos que prefieran seguir comulgando con el W3C y los Estándares Web, crear un código válido e igualmente funcional es así de sencillo:

Este es el código que genera YouTube:

1
2
3
4
5
6

<object width="425" height="350">
	<param name="movie" value="http://www.youtube.com/v/urTUP9HWRMk"></param>
	<param name="wmode" value="transparent"></param>
	<embed src="http://www.youtube.com/v/urTUP9HWRMk" type="application/x-shockwave-flash" wmode="transparent" 
width="425" height="350"></embed>
</object>

Basta con cambiarlo de esta manera:

1
2
3
4

<object width="425" height="350" type="application/x-shockwave-flash" data="http://www.youtube.com/v/urTUP9HWRMk">
	<param name="movie" value="http://www.youtube.com/v/urTUP9HWRMk" />
	<param name="wmode" value="transparent" />
</object>

Lo que estamos haciendo es tan simple como establecer los atributos a un elemento estándar y soportado como <object> que era prácticamente inédito en el código youtube a cambio del obsoleto ^^ <embed>

Vía: No lo recuerdo…
Bien!, la fuente fue el famoso libro e imprescindible para mí: “Diseño con Estándares Web” del también conocido en este blog J. Zeldman. También tenemos la referencia en ALA (A List Apart), uno más de los proyectos colaborativos de Zeldman, acerca del elemento <embed> en el libro

—
Aunque… como no?, creo que hay un precio que siempre está pagando el marcado estándar, los navegadores antiguos, los navegadores que se diseñaron durante la “Guerra de los Navegadores“, y sus reglas propietarias, y es en ellos en donde siempre nuestro marcado estándar va a tener que sufrir retoques y peripecias miles

Este código está comprobado y funciona perfecto en Linux/Ubuntu:

• Firefox 1.x+
• y por lo tanto Mozilla Suite 1.7.x y Netscape
• Epiphany
• Opera 9
• M.I.Explorer 5 y 6 con “Wine“.

Creo que hay un varios plugins para Wordpress y se pueden utilizar modificándolos un poco para otros servicios del estilo de YouTube como Google Video, DailyMotion, MySpace MetaCafe, etc… solo son simples reemplazos con expresiones regulares.

Prácticamente el mismo código es usado para otros sistemas de contenidos como phpbb, Vanilla de lussumo…
*Aquí lo podeis ver en el mod que arreglé para el Foro de La Guardia:
Por fin! Ya tenemos barra de formateo de texto

Por mi parte no uso plugin alguno y meto el código a pelo, lo cual me acarreará problemas en el futuro… pero no tengo tiempo de hacer mi propio plugin que es lo que me gustaría ^^

Dándole un poco estilo te puede quedar algo así:

1
2
3
4
5
6
7
8

<div class="pre_video">
<h3>Cultura Digital#Vídeo</h3>
<a href="http://www.youtube.com/v/urTUP9HWRMk">
Idea (cómo se inventó el canon de SGAE)</a>
<div class="video">
<object width="425" height="350" type="application/x-shockwave-flash" data="http://www.youtube.com/v/urTUP9HWRMk"><param name="movie" value="http://www.youtube.com/v/urTUP9HWRMk" /><param name="wmode" value="transparent" /></object>
</div>
</div>

Más un CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.pre_video {
	font:18px Georgia, Arial;
	color:#69c;
	text-align:center;
	margin:3px auto;
	padding:5px 2px;
}
 
.pre_video a {
	font-size:12px;
}
 
.video {
	text-align:center;
	margin:5px auto;
}

Resultado:

^^