31 de Enero de 2008

XHTML válido al insertar videos de YouTube

desarrollo Deja un comentario

Insertar un video de YouTube en tu blog es muy sencillo. Basta con copiar y pegar el HTML que se nos proporciona. Pues bien, si simplemente hacemos esto la página resultante no va a ser XHTML válido.

not valid html

valid xhtml

Buscando he encontrado varias maneras de convertir dicho HTML a XHTML válido. A mí no me ha funcionado ninguna directamente, ya que me rompían el diseño de la página. Al final, he tenido que introducir el nuevo código dentro de un div. Si utilizas los ejemplos que adjunto tendrás que ver si el nuevo div encaja en el diseño de la página.

YouTube

El HTML que nos proporcionan tiene esta pinta:

<object width="425" height="355">
<param name="movie" value="[URL]"></param>
<param name="wmode" value="transparent"></param>
<embed src="[URL]" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>
</object>

A mí me valida si lo cambio por:

<div align="center">
<object type="application/x-shockwave-flash" style="width:425px height:355px" data="[URL]"> <param name="movie" value="[URL]" />
</object>
</div>

Tendrás que sustituir [URL] por la URL a tu video en YouTube.

Slideshare

Con slideshare pasa algo similar. El HTML que nos proporcionan es:

<div style="width:425pxtext-align:left" id="__ss_195187"><object style="margin:0px" width="425" height="355">
<param name="movie" value="http://static.slideshare.net/swf/ssplayer2.swf?doc=como-programar-un-blog-rest-1197022685945500-3"/><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><embed src="http://static.slideshare.net/swf/ssplayer2.swf?doc=como-programar-un-blog-rest-1197022685945500-3" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="355"></embed></object><div style="font-size:11pxfont-family:tahoma,arialheight:26pxpadding-top:2px"><a href="http://www.slideshare.net/?src=embed"><img src="http://static.slideshare.net/swf/logo_embd.png" style="border:0px nonemargin-bottom:-5px" alt="SlideShare"/></a>  <a href="http://www.slideshare.net/zanaguara/como-programar-un-blog-rest" title="View 'Como programar un blog REST' on SlideShare">View</a>  <a href="http://www.slideshare.net/upload">Upload your own</a></div></div>

Yo lo he cambiado por:

<div align="center">
<object type="application/x-shockwave-flash" style="width:425px height:355px" data="http://static.slideshare.net/swf/ssplayer2.swf?doc=como-programar-un-blog-rest-1197022685945500-3"> <param name="movie" value="http://static.slideshare.net/swf/ssplayer2.swf?doc=como-programar-un-blog-rest-1197022685945500-3" />
</object>
</div>

9 comentarios a “XHTML válido al insertar videos de YouTube”

  1. Tengo Un.Com.ar dice:
    2 de Abril de 2008 a las 16:06

    Validar XHTML En videos de Youtube y Presentaciones de SlideShare…

    Como muchos sabemos Validar XHTML Nos puede Ayudar Favorablemente de cara al Seo (Posicionamiento) en Nuestro Blog/Web, como así también a dar una buena Imagen de Nosotros, o al menos preocuparnos por que este todo Optimizado al Máximo para tener ma…

  2. irenuka dice:
    28 de Agosto de 2008 a las 2:00

    hey muchas gracias genio ;)

  3. Rafa dice:
    23 de Septiembre de 2008 a las 16:27

    no funciona…

  4. jorge dice:
    10 de Octubre de 2008 a las 0:37

    Hola, ya llevo mucho tiempo intentando pegar un video en mercadolibre y no se si sea pocible por html pego el url o el embled y dada me puedes ayudar?

  5. Sebastian dice:
    13 de Octubre de 2008 a las 0:51

    Hola, al insertar el html taal como lo mostraste (para yuotube) no valida. Pero con unos retoques funcionó perfectamente.
    Te dejo el codigo abajo para que lo veas…o directamente en mi web ya VALIDANDO ;)

    Abrazos!

    Codigo:

  6. Alejandro dice:
    30 de Diciembre de 2008 a las 20:44

    No valida, porque le faltan valores en el estilo:

    Original propuesto:
    style=”width:425px height:355px”

    Corregido:
    style=”width:425px; height:355px;”

    Le faltaban las ; despues de cada medida

  7. Alejandro dice:
    30 de Diciembre de 2008 a las 20:47

    Otro detalle para que valide, solo deben poner la URL, no agregen los parametros de colores de la ventana, ni nada de eso..
    por que si no no valida…

    Ejemplo valido en: http://www.viewchannel.com.mx/videoteca.php

  8. noimporta dice:
    18 de Febrero de 2009 a las 17:08

    Al intentar pasar el test de validación de la W3C de esta página:

    http://validator.w3.org/check?uri=http%3A%2F%2Fjaviervidal.net%2Fxhtml-valido-al-insertar-videos-de-youtube%2F&charset=(detect+automatically)&doctype=Inline&group=0

  9. Javier Vidal Postigo dice:
    19 de Febrero de 2009 a las 7:31

    Sí, lo sé, gracias por indicarlo. Tengo pendiente revisarlo.

Deja un comentario