Desde hace unas semanas llevo buscando la manera de validar el blog con los estándares de la W3C para los diferentes tipos de archivos: XHTML, CSS y RSS. No sirve de nada ponerlo o no, pero el caso es que el icono que podéis ver en el pie de página queda bonito y me gusta, además de ser una manera de evitar que en unos navegadores el diseño sea diferente a otros. Si lo es, como pasa actualmente con IE y las imágenes de bordes redondeados de la barra lateral, es porque NO cumple los estándares.
Una de las mayores dificultades que encontré para la validación fueron los vídeos de Youtube. La verdad es que desconozco el motivo por el que la página muestra un código erróneo para mostrar sus vídeos en cualquier página web, porque el resultado es el mismo. El caso es que decidí ponerme a investigar y llegué hasta Noséqué.net de manera que ya lo tenía casi todo hecho. Una vez que tenía el código:
<object type="application/x-shockwave-flash" style="width :425px;height:350px" data="http://www.youtube.com/v/XXX"> <param name="movie" value="http://www.youtube.com/v/XXX" /></object>
donde XXX es el ID del vídeo, que es una cadena sin significado alguno que sirve para identificar el vídeo. Sólo es necesario reemplazar este identificador por el del vídeo en cuestión y todo perfecto.
Ahora, parte de mi cosecha, es la inclusión de un quicktag en el panel de escritura de «WordPress»:http://www.wordpress.org, que no son más que botones para insertar código HTML de una manera sencilla y práctica.
Antes de nada es necesario comentar que sólo funcionará lo que comentaré a continuación a aquellos usuarios que tengan deshabilitada la opción Utilizar el editor visual para escribir que se encuentra en Opciones personales dentro de Usuarios->Perfil. Son, por lo general, los usuarios más avanzados los que tienen deshabilitada esta opción.
En primer lugar editaremos el fichero wp-includes/js/quicktags.js y localizaremos la línea que contiene la última creación del objeto edButton (en mi caso la 135) con una apariencia parecida a:
Una vez localizado, añadiremos a continuación el código que nos permitirá crear un botón:
Por defecto el botón aparece con el texto Youtube pero si quisieras cambiarlo por el motivo que fuera, sólo tienes que reemplazarlo. Una vez creado el botón en sí, crearemos la aparición de un inputbox para insertar el identificador del vídeo en cuestión. Para ello localizaremos la línea (en mi caso la 176)
de manera que no sea la última condición del if. Ya no queda más que situarse al final del fichero y añadir la siguiente función para que al pinchar aceptar en el cuadro, se inserte todo el código automáticamente:
A partir de ahora, aparecerá una nueva etiqueta en el panel de escritura de WordPress llamada Youtube y que al pinchar, nos aparecerá un cuadro de diálogo para insertar el identificador del vídeo, presionar aceptar e insertarse automáticamente el código en la posición del cursor.
Actualización: Como bien comenta InKiLiNo la sentencia else if estaba mal, porque había copiado y pegado el bloque siguiente. Ya está arreglado.
Comentarios
15 respuestas a «Código válido en XHTML de tus vídeos preferidos»
Tu mini-tutorial me ha ido como anillo al dedo, para poder poner videos validos en mi Blog, pero he seguido los pasos al pie de la letra, y no me funcionaba, y cuando me he puesto ha revisar el codigo he encontrado un pequeño fallo. Te adjunto una imagen donde te marco las 2 palabras que hay que corregir para que funcione coreectamente.
http://inkilino.sytes.net/Blog/images/youtube.gif
Saludos y gracias por este mini-tutorial tan util.
Gracias InKiLiNo, tuve un pequeño problema al copiar el código cuando estaba escribiendo la entrada porque me lo interpretaba y de tanto copiar y pegar, al final ya no sabía qué hacía.
*Gracias*, ya lo he arreglado
Vídeos de Youtube válidos y crear quicktag para WP
El código que ofrece Youtube para poner un vídeo en nuestro web no es válido. Este mini-tutorial sirve para que el vídeo valide los estándares W3C y crear un botón rápido para insertar el código válido a partir de su ID. Fácil y sencillo.
[…] Códigio para que YouTube valide en tu blog. En Mangas verdes nos informan de que Javi Vicente y Noséqué.net han modificado el código para insertar vídeos de YouTube haciéndo que valide correctamente. […]
[…] Códigio para que YouTube valide en tu blog. En Mangas verdes nos informan de que Javi Vicente y Noséqué.net han modificado el código para insertar vídeos de YouTube haciéndo que valide correctamente. […]
Sabeis como hacerlo para los videos de google video?
hiphop, esta mañana le he dedicado una entrada.
!Y vídeos de Google también!
Gracias por darme la idea 😉
[…] Utilidades: Tutorial para crear un videoblog Tutorial en inglés Cómo añadir películas Quicktime a webs Userplane: AV Mail: Para grabar mensajes y ponerlos en tu blog. DownloadGoogleVideos.com: Para buscar, descargar y colgar en tu web los videos de Google Video. KeepVid: Descargar vídeos de Google, Youtube, iFilm, Putfile, Metacafe, DailyMotion. ñblog: Videoblogging o vlogging, videos en el blog Descarga de vídeos: Video Downloader, KeepVid. gabinetedeinformatica.net » Pasar vídeos de tu videocámara a un cd o Internet: I, II, y III. Punto y aparte: Guerra de formatos Tutorial YouTube ervdesign » Insertar video Flash en tu blog blogoff » Cómo poner un vídeo de YouTube en un blog Springdoo: Mandar video-emails. Actual World » Código válido en XHTML de tus vídeos preferidos […]
[…] Hace algunas semanas ya escribí una anotación en la que pegaba un trozo de código para poder poner vídeos de Youtube en un blog sin cargarse la validación xhtml. Resulta que el post llegó hasta las manos de Actual Word y su autor, Javi Vicente, el cuál decidió currarse un breve tutorial de cómo poner un quicktag que introduzca el código de Youtube automáticamente. […]
Por favor Javi, ayudame. No consigo colgar los videos ni con google ni You tube. Lo he probado todo. En previsualizar funciona. Publico y se fastidio.
Echa un vistazo http://www.historiasdecine.com
Gracias por todo. Enhorabuena por tu blog, sensacional.
Miguel.
[…] Nos preguntaba ayer hiphop en un comentario acerca de un código para Google Video que valide en XHTML, al igual que hicimos para youtube. […]
Javi, los codigos ya no se ven como texto sino que son interpretados. Y queria coger el codigo por que no se donde guarde la plantilla que cree con lo que pusiste.
hola, me gustaría saber cómo puedo poner un video de música en mi fotolog.
ojala me puedan ayudar
gracias
Holaz
[…] Esta mañana me he leido el mini-tutorial de Javi Vicente de como poner un boton de YouTube en el editor de texto de WordPress, y que encima despues de publicarlo pasemos exitosamente la validación de XHTML 1.0. […]