Tuenti y los vídeos

[will-o-the-wisp]

Resulta que me ha apetecido hacerme un blog para contar chorradas y hacerme el inteligente y, entre otras cosas, había pensado que podría ser cómodo para el lector el hecho de que al hacer click en un vídeo incrustado, este se reprodujera en la esquina de la pantalla, permitiéndole seguir leyendo sin perder el vídeo de vista. Este es el mismo sistema que sigue Tuenti con los vídeos que se ponen en los mensajes y en el tablón, así que me puse a investigar. Y cuando buscas cualquier cosa que contenga las palabras "Tuenti" y "vídeos" en Google, te salen un montón de opciones acerca de cómo personalizar noséqué mierda o gente que se queja porque ha puesto un vídeo que no permite inserción y no se le reproduce.

Así que, si alguien de aquí con conocimientos informáticos y con acceso a la red social me puede decir más o menos cómo se hace y tal, se lo agradecería. Me manejo un poco con html y hojas de estilo css, pero imagino que no tendrá nada que ver y será algo tipo javascript.

Me parece que en el código fuente, la parte que corresponde a lo que busco es esto:

Code: Select all

<xmp id="video_player_config" class="hide"config="{&quot;statsLink&quot;:{&quot;url&quot;:&quot;?m=Video&func=log_playback&ajax=1&store=0&ajax_target=canvas&quot;,&quot;post_params&quot;:{&quot;video_id&quot;:&quot;__placeholder__&quot;,&quot;csfr&quot;:&quot;8e20ca07&quot;,&quot;elapsed&quot;:&quot;__placeholder__&quot;}},&quot;placeholder_param_name&quot;:&quot;__placeholder__&quot;,&quot;translations&quot;:{&quot;share_title&quot;:&quot;Compartir v\u00eddeo&quot;,&quot;add_title&quot;:&quot;A\u00f1adir a mis v\u00eddeos&quot;,&quot;open_event_title&quot;:&quot;Ir a evento&quot;,&quot;share&quot;:&quot;Compartir&quot;,&quot;add&quot;:&quot;A\u00f1adir&quot;,&quot;adding&quot;:&quot;A\u00f1adiendo&quot;,&quot;added&quot;:&quot;A\u00f1adido&quot;,&quot;open_event&quot;:&quot;Ir a evento&quot;,&quot;maximize&quot;:&quot;Maximizar&quot;,&quot;minimize&quot;:&quot;Minimizar&quot;,&quot;close&quot;:&quot;Cerrar&quot;,&quot;loading&quot;:&quot;Cargando&quot;,&quot;timeout&quot;:&quot;Cerrar&quot;,&quot;replay&quot;:&quot;Repetir&quot;,&quot;play&quot;:&quot;Reproducir v\u00eddeo&quot;,&quot;show_video&quot;:&quot;Mostrar v\u00eddeo&quot;,&quot;static_path&quot;:&quot;http:\/\/estaticosak1.tuenti.com\/&quot;,&quot;invalid_flash&quot;:&quot;Tu versi\u00f3n de flash no est\u00e1 soportada&quot;,&quot;no_flash&quot;:&quot;No tienes reproductor de flash instalado&quot;,&quot;update_flash&quot;:&quot;Haz click aqu\u00ed para descargarte la \u00faltima versi\u00f3n&quot;,&quot;update_flash_url&quot;:&quot;http:\/\/get.adobe.com\/es\/flashplayer\/&quot;,&quot;playlist_problem&quot;:&quot;Error al cargar la lista de reproducci\u00f3n&quot;},&quot;video_id_param_name&quot;:&quot;video_id&quot;,&quot;elapsed_time_param_name&quot;:&quot;elapsed&quot;,&quot;entrypoint_param_name&quot;:&quot;entry&quot;,&quot;sponsor_source_param_name&quot;:&quot;sponsor_play_source&quot;,&quot;sponsor_source_video_ad_linked&quot;:0,&quot;sponsor_source_video_viral&quot;:1,&quot;sponsor_source_video_sponsored_event&quot;:7,&quot;sponsor_source_video_reminder&quot;:9,&quot;event_source_param_name&quot;:&quot;coming_from_video_ad&quot;,&quot;event_source_placeholder_value&quot;:&quot;__placeholder__&quot;,&quot;placeholder&quot;:&quot;__placeholder__&quot;,&quot;collection_key_param_name&quot;:&quot;collection_key&quot;,&quot;item_offset_param_name&quot;:&quot;video_offset&quot;,&quot;video_urls_json_param_name&quot;:&quot;video_urls&quot;,&quot;search_term_param_name&quot;:&quot;search_term&quot;,&quot;direction_param_name&quot;:&quot;direction&quot;,&quot;video_category_page_size&quot;:10,&quot;top_videos_page_size&quot;:10,&quot;page_no_param_name&quot;:&quot;videos_page&quot;,&quot;full_collection_param_name&quot;:&quot;full_collection&quot;,&quot;from_search_playlist_id_prefix&quot;:&quot;from_search_&quot;,&quot;top_videos_playlist_id_prefix&quot;:&quot;9-&quot;,&quot;prefetch_left_direction&quot;:&quot;left&quot;,&quot;prefetch_right_direction&quot;:&quot;right&quot;,&quot;prefetch_center_direction&quot;:&quot;center&quot;,&quot;player_path&quot;:&quot;http:\/\/estaticosak1.tuenti.com\/\/client_apps\/video_player\/6_player.82fc1bad9f.swf&quot;,&quot;public_page&quot;:false,&quot;api_domain&quot;:&quot;www.tuenti.com&quot;,&quot;autoroll_player_path&quot;:&quot;http:\/\/estaticosak1.tuenti.com\/\/client_apps\/video_player\/streamPlayer.fd851c61bd.swf&quot;,&quot;osmf_player_path&quot;:&quot;http:\/\/estaticosak1.tuenti.com\/\/client_apps\/video_player\/osmfStreamPlayer.c89d8eebfe.swf&quot;,&quot;akamaihd_player_path&quot;:&quot;http:\/\/estaticosak1.tuenti.com\/\/client_apps\/video_player\/akamaiHDPlayer.7f5c0720d2.swf&quot;,&quot;add_to_my_videos_link&quot;:{&quot;url&quot;:&quot;?m=Playlist&func=process_add_video_to_playlist&collection_key=15-61772062-1&ajax=1&store=0&ajax_target=canvas&quot;,&quot;post_params&quot;:{&quot;video_urls&quot;:&quot;__placeholder__&quot;,&quot;csfr&quot;:&quot;8e20ca07&quot;}},&quot;share_video_link&quot;:{&quot;url&quot;:&quot;?m=Video&func=view_share_video&ajax=1&store=0&ajax_target=light_box&quot;,&quot;post_params&quot;:{&quot;video_id&quot;:&quot;__placeholder__&quot;,&quot;csfr&quot;:&quot;8e20ca07&quot;}},&quot;increase_plays_counter_link&quot;:{&quot;url&quot;:&quot;?m=Video&func=proccess_increase_plays_counter&ajax=1&store=0&ajax_target=none&quot;,&quot;post_params&quot;:{&quot;video_id&quot;:&quot;__placeholder__&quot;,&quot;csfr&quot;:&quot;8e20ca07&quot;,&quot;sponsor_play_source&quot;:&quot;__placeholder__&quot;}},&quot;open_event_link&quot;:{&quot;url&quot;:&quot;?m=Event&func=view_event&event_key=__placeholder__&ajax=1&store=1&ajax_target=canvas&quot;,&quot;post_params&quot;:{&quot;coming_from_video_ad&quot;:&quot;__placeholder__&quot;,&quot;csfr&quot;:&quot;8e20ca07&quot;}},&quot;track_play_from_sponsored_link&quot;:{&quot;url&quot;:&quot;?m=Clienttracking&func=track_video_ad&ajax=1&store=0&ajax_target=canvas&quot;,&quot;post_params&quot;:{&quot;video_id&quot;:&quot;__placeholder__&quot;,&quot;csfr&quot;:&quot;8e20ca07&quot;,&quot;source_id&quot;:2}},&quot;playlist_prefetch_link&quot;:{&quot;url&quot;:&quot;?m=Playlist&func=get_playlist_content_by_id&collection_key=__placeholder__&video_offset=__placeholder__&direction=__placeholder__&ajax=1&store=0&ajax_target=canvas&quot;},&quot;go_to_video_page_link&quot;:{&quot;url&quot;:&quot;?m=Video&func=view_videos&full_collection=__placeholder__&collection_key=__placeholder__&videos_page=__placeholder__&ajax=1&store=1&ajax_target=canvas&quot;},&quot;playlist_prefetch_by_video_urls&quot;:{&quot;url&quot;:&quot;?m=Playlist&func=get_playlist_content_by_video_url&video_urls=__placeholder__&search_term=__placeholder__&video_offset=__placeholder__&ajax=1&store=0&ajax_target=canvas&quot;},&quot;go_to_search_page_link&quot;:{&quot;url&quot;:&quot;?m=Video&func=view_search_videos_canvas&video_search_term=__placeholder__&ajax=1&store=1&ajax_target=canvas&quot;}}"></xmp><xmp id="comment_on_config" class="hide"config="{&quot;wall_comment_id&quot;:&quot;wall_post_reply_comment_&quot;,&quot;wall_comment_container_id&quot;:&quot;wall_post_replies_container_&quot;,&quot;number_of_lines&quot;:&quot;3&quot;,&quot;line_height&quot;:&quot;18&quot;,&quot;ellipsis_text&quot;:&quot;M\u00e1s&quot;,&quot;ellipsis_class&quot;:&quot;viewMore&quot;}"></xmp><xmp id="misc_monet_config" class="hide"config="{&quot;autoroll_site_config&quot;:{&quot;frequency_cap&quot;:1,&quot;time_interval&quot;:600,&quot;cookie_name&quot;:&quot;autoroll&quot;},&quot;autoroll_user_demographics&quot;:{&quot;age&quot;:20,&quot;gender&quot;:1,&quot;province&quot;:50,&quot;country&quot;:&quot;ES&quot;,&quot;uid&quot;:&quot;538394148a264db3c6898cc50f660e80&quot;,&quot;relationship&quot;:&quot;0&quot;},&quot;update_footer_url&quot;:&quot;?m=Page&func=update_sponsorships&ajax=1&store=0&ajax_target=trigger-exclusive_sponsorships&quot;,&quot;update_footer_revision&quot;:3,&quot;video_blast_config&quot;:{&quot;videoBlastsEnabled&quot;:true,&quot;videoBlastsLength&quot;:900,&quot;videoBlastsExclusionTime&quot;:300,&quot;videoBlastRandomPlaybackSpan&quot;:60,&quot;cookieName&quot;:&quot;videoblasts&quot;,&quot;loadNextBlast&quot;:{&quot;url&quot;:&quot;?m=Videoblast&func=get_next_blast&lastBlast=__PLACEHOLDER__&ajax=1&store=0&ajax_target=canvas&quot;,&quot;placeholder&quot;:&quot;__PLACEHOLDER__&quot;},&quot;nextBlast&quot;:{&quot;blast_id&quot;:null,&quot;name&quot;:&quot;&quot;,&quot;campaign_key&quot;:&quot;&quot;,&quot;campaign_zone&quot;:&quot;&quot;,&quot;frequency&quot;:1,&quot;start_time&quot;:-1,&quot;end_time&quot;:-1,&quot;timeout_start_time&quot;:-1,&quot;timeout_end_time&quot;:-1,&quot;status&quot;:0,&quot;crc&quot;:null}}}"></xmp><xmp id="media_bar_config" class="hide"config="{&quot;media_bar_translations&quot;:{&quot;mediabar_add&quot;:&quot;A\u00f1adir&quot;,&quot;video_search&quot;:&quot;V\u00eddeo&quot;,&quot;photo_chooser&quot;:&quot;Foto&quot;},&quot;video_search_config&quot;:{&quot;provider&quot;:[&quot;TuentiProvider&quot;,&quot;YoutubeProvider&quot;],&quot;printer&quot;:&quot;ProfileVideoSearchPrinter&quot;,&quot;tuentiProviderConfig&quot;:{&quot;url&quot;:&quot;?m=Video&func=search_videos&num_videos=__placeholder__&query=__placeholder__&from=1&ajax=1&store=0&ajax_target=canvas&quot;,&quot;numResultsParam&quot;:&quot;num_videos&quot;,&quot;queryParam&quot;:&quot;query&quot;,&quot;placeholderName&quot;:&quot;__placeholder__&quot;,&quot;numResults&quot;:4,&quot;maxPerPage&quot;:6}},&quot;video_search_translations&quot;:{&quot;process_message&quot;:&quot;Buscando...&quot;,&quot;success_message&quot;:&quot;Buscar&quot;,&quot;entry&quot;:&quot;Contenido&quot;,&quot;add_button&quot;:&quot;A\u00f1adir&quot;,&quot;close_button&quot;:&quot;Volver&quot;,&quot;search_button_text&quot;:&quot;Buscar&quot;,&quot;pager_next&quot;:&quot;Siguiente&quot;,&quot;pager_previous&quot;:&quot;Anterior&quot;,&quot;no_result_message&quot;:&quot;No se encontraron resultados para tu b\u00fasqueda&quot;,&quot;empty_search_term&quot;:&quot;El cuadro de b\u00fasqueda no puede estar vac\u00edo&quot;},&quot;photo_chooser_config&quot;:{&quot;template_url&quot;:&quot;http:\/\/www.tuenti.com\/#m=Photo&amp;func=index&amp;collection_key=___PHOTO_KEY___&quot;,&quot;template_url_placeholder&quot;:&quot;___PHOTO_KEY___&quot;,&quot;photoChooserTargetName&quot;:&quot;light_box_photo_chooser&quot;},&quot;photo_chooser_urls&quot;:{&quot;default&quot;:&quot;?m=Photochooser&func=view_default_choose_photo&ajax=1&store=0&ajax_target=light_box_photo_chooser&quot;}}"></xmp><xmp id="rich_media_config" class="hide"config="{&quot;translations&quot;:{&quot;normal_external_url_title&quot;:&quot;Enlace externo no verificado&quot;,&quot;normal_external_url_message&quot;:&quot;El enlace externo al que intentas acceder no es seguro.&quot;,&quot;normal_external_url_question&quot;:&quot;\u00bfEst\u00e1s seguro de que deseas continuar? Recuerda que nunca debes descargar archivos ni introducir tus datos de acceso a Tuenti en p\u00e1ginas web no seguras.&quot;,&quot;trusted_external_url_title&quot;:&quot;Enlace externo&quot;,&quot;trusted_external_url_message&quot;:&quot;El enlace al que intentas acceder est\u00e1 fuera de Tuenti.&quot;,&quot;trusted_external_url_question&quot;:&quot;\u00bfEst\u00e1s seguro de que deseas continuar?&quot;,&quot;malicious_external_url_title&quot;:&quot;Enlace no seguro&quot;,&quot;malicious_external_url_message&quot;:&quot;Se ha bloqueado el enlace a esta URL dado que nuestro sistema ha detectado que su contenido supone un riesgo para la seguridad.&quot;,&quot;malicious_external_url_removed_reason&quot;:&quot;Enlace retirado&quot;,&quot;youtube_video_url_title&quot;:&quot;V\u00eddeo externo de YouTube &quot;,&quot;youtube_video_url_message&quot;:&quot;Este v\u00eddeo s\u00f3lo puede verse en Youtube.&quot;,&quot;youtube_video_url_question&quot;:&quot;\u00bfEst\u00e1s seguro de que deseas acceder Youtube para ver el v\u00eddeo?&quot;,&quot;ok&quot;:&quot;Continuar&quot;,&quot;cancel&quot;:&quot;Cancelar&quot;,&quot;confirm&quot;:&quot;Aceptar&quot;},&quot;url_classification&quot;:{&quot;url&quot;:&quot;?m=Linksecurity&func=get_url_classification&ajax=1&store=0&ajax_target=canvas&quot;,&quot;param_name&quot;:&quot;url&quot;,&quot;classes&quot;:{&quot;normal&quot;:1,&quot;malicious&quot;:0,&quot;trusted&quot;:2,&quot;allowed_internal&quot;:5}},&quot;url_display_length&quot;:60}"></xmp><xmp id="overlay_config" class="hide"config="{&quot;dialog&quot;:{&quot;defaultAcceptLabel&quot;:&quot;Aceptar&quot;,&quot;defaultCancelLabel&quot;:&quot;Cancelar&quot;,&quot;defaultCloseLabel&quot;:&quot;Cerrar&quot;,&quot;animation&quot;:true,&quot;ttl&quot;:1500}}"></xmp>

Pero está lleno de protocolos que no me interesan (¿links maliciosos? ¿en un vídeo de Youtube?) y además no sé descifrarlo.

[Viento]

En menudo charco te estás metiendo...

Es algo complicado. Si te suena a chino trataré de hacerlo más entendible.

Lo primero que necesitas es crearte un <div id="divWillotube"> flotante que se quede siempre alineado a pie de página y a la izquierda. Ese <div> tendrá que contener un iframe tal que así:

Code: Select all

<iframe 
 id="willotube"
 name="willotube"
  title="youtube" 
  class="youtube-player" 
  type="text/html" 
  width="640"
  height="390" 
  src="http://www.youtube.com/embed/-p3atsZRPLc?rel=0" 
  frameborder="0" 
  allowFullScreen 
></iframe>

Con ese div e iframe tendrás que jugar con el javascript, y cada vez que pinches en una imagen que hará las veces de thumbnail del video en el post, deberás mostrar el div, y cambiar el src del iframe y la visibility del div (vía document.getElementById('willotube') y document.getElementById('divWillotube') )

Además, no te olvides de meterle una barra al div que te sirva para cerrar el vídeo.

El javascript sería algo así

Code: Select all

<script>
function willear(youtubeID){
var iframe = document.getElementById('willotube') ;
var willodiv = document.getElementById('divWillotube') ;

var src = "http://www.youtube.com/embed/' + youtubeID + '?rel=0' ;
willodiv.style.visibility = 'hidden'; 

}
</script>

y tendría que ser invocado al pinchar en la imagen que haría de thumbnail del video, algo así

Code: Select all

<a href="willear('-p3atsZRPLc')"><img src="willomagen.jpg"></a>

Espero que te hagas una idea de por donde van los tiros. Faltaría configurarte el div, darle estilo, hacer el javascript para cerrarlo y jugar con los tamaños, pero de eso si que hay 20 mil tutoriales, como por ejemplo: http://www.randomsnippets.com/2008/02/1 ... -your-div/


Edit:

Para hacer la tontería completa, para que tu div flote tendría que ser con este estilo:

Code: Select all

<div id="divWillotube" style="position: absolute;bottom:0;
   right:0; width: 100px;height:25px;">aquí iría el iframe</div>

eso si, el width y el height tienes que jugar con ellos, ya que aquí tengo capado youtube y no puedo probar.

[will-o-the-wisp]

¡Muchas gracias! Pero, ¿cómo puedo hacer que el <div> sea independiente del youtubeID del vídeo de Inception? ¿O es que tengo que hacer un <div> por cada vídeo que ponga?

Por lo pronto, se ve en el lugar correcto, así que ahora investigaré sobre el resto de cosas (principalmente para cerrarlo).

[Viento]

He visto que tenía cagadillas en el código, es lo que tiene programar de cabeza! un profesor de la facultad siempre decía "en la pizarra compila todo, así que no tengáis miedo en resolver el programa"

Code: Select all

  <script>
function willear(youtubeID){
var iframe = document.getElementById('willotube') ;
var willodiv = document.getElementById('divWillotube') ;

var src = 'http://www.youtube.com/embed/' + youtubeID + '?rel=0' ;
iframe.src = src;
willodiv.style.visibility = 'visible'; 

}
</script>
<div id="divWillotube" style="bottom:0;
   right:0; width: 640px;height:390px;padding:0;margin:0;position: fixed;"><iframe 
id="willotube"
name="willotube"
  title="youtube" 
  class="youtube-player" 
  type="text/html" 
  width="640"
  height="390" 
  src="http://www.youtube.com/embed/-p3atsZRPLc?rel=0" 
  frameborder="0" 
  allowFullScreen 
></iframe></div>
<a href="javascript:willear('-p3atsZRPLc')"><img src="http://i1.ytimg.com/vi/-p3atsZRPLc/hqdefault.jpg" /></a>
<br>
<a href="javascript:willear('A01j_zxaR5U')"><img src="http://i1.ytimg.com/vi/A01j_zxaR5U/hqdefault.jpg" /></a>

Para el thumbnail, te he creado una funcioncilla que te lo genere y así se crea dinámicamente, ya que los thumbnails se construyen siempre igual

Code: Select all

function willearThumbnail(youtubeID){
document.write("<a href='javascript:willear(\""+youtubeID+"\")'><img src='http://i1.ytimg.com/vi/"+youtubeID+"/hqdefault.jpg' /></a>");
}

y por tanto, para usarlo basta con meter el siguiente código justo donde quieras que se muestre la imagen

Code: Select all

<script>
willearThumbnail('A01j_zxaR5U');
</script>

Por cierto, me gusta como queda, es muy probable que te lo plagie para el foro xD

[will-o-the-wisp]

Cómo mola. Funciona perfectamente (puedes ver el resultado aquí), así que mañana reduciré las thumbnails (que me imagino que será poniendo parámetros width y height a la función que las genera) y miraré detenidamente cómo ocultarlo y ponerle un botón de cerrar.

He reducido un poco el tamaño del vídeo porque tengo una pantalla gigantesca y no sé exactamente cómo se verá en un ordenador normal, así que eso también lo probaré mañana en la facultad.

¡Muchas gracias! La verdad es que era algo que me parecía muy útil, simplemente por el hecho de poder seguir leyendo texto y viendo el vídeo a la vez. Además, me imagino que con el reproductor oculto, la página se cargará más rápido que si tuviera los vídeos insertados directamente (porque carga thumbnails, no vídeos).

[Viento]

Queda superchulo!

Tienes también la opción de usar el thumbnail normal utilizando el default.jpg en lugar del hqdefault.jpg

Code: Select all

function willearThumbnail(youtubeID){
document.write("<a href='javascript:willear(\""+youtubeID+"\")'><img src='http://i1.ytimg.com/vi/"+youtubeID+"/default.jpg' /></a>");
}

aunque tal vez este es demasiado pequeño, y la mejor opción sea la que dices, la de añadir width y height al hqdefault.jpg

Para el tema de cerrar:

Code: Select all

<script>
function cerrar(){
var willodiv = document.getElementById('divWillotube') ;
var iframe = document.getElementById('willotube') ;

willodiv.style.visibility = 'hidden'; 
iframe.src="";
}
</script> 

importante el iframe.src porque sino el video seguiría sonando por debajo.

y metiéndole un padding de 5px y fondo negro para que quede similar al del tuenti

Code: Select all

<div id="divWillotube" style="bottom: 0pt; right: 0pt; width: 320px; height: 270px; margin: 0pt; position: fixed; border-left-width: 10px; border-bottom-width: 10px; border-right-width: 10px; background: none repeat scroll 0% 0% black; padding: 5px; text-align: right;">
<a href="javascript:cerrar();">Cerrar</a>
<iframe height="270" frameborder="0" width="320" class="youtube-player" id="willotube" name="willotube" src="http://www.youtube.com/embed/-p3atsZRPLc?rel=0" title="youtube" type="text/html"></iframe>
</div>

y bueno, creo que eso es todo!

Ah no espera! Que aún hay más! Falta poner un botón de play, por tanto la función de thumbnail quedaría así, utilizando 2 divs, uno para ponerle como background el thumbnail y otro para ponerle como background el botón de play.

Code: Select all

function willearThumbnail(youtubeID){
var thumb="<a href=\"javascript:willear(\""+youtubeID+"\")\"><div style=\"background-image: url('http://i1.ytimg.com/vi/"+youtubeID+"/hqdefault.jpg'); width: 480px; height: 360px;\"><div style=\"width: 100%; height: 100%; background-image: url('http://www.collegeplus.org/public/img/graphics/fancybox/fancybox_play-button-icon.png'); background-position: center center; background-repeat: no-repeat;\"></div></div></a>";
document.write(thumb);
}

[will-o-the-wisp]

Casi, casi. El editor de Blogger me da error aquí:

Code: Select all

function willearThumbnail(youtubeID){
var thumb="<a href='\javascript:willear(\""+youtubeID+"\");'><div style=\"background-image: url('http://i1.ytimg.com/vi/"+youtubeID+"/hqdefault.jpg'); width: 480px; height: 360px;\"><div style=\"width: 100%; height: 100%; background-image: url('http://www.collegeplus.org/public/img/graphics/fancybox/fancybox_play-button-icon.png'); background-position: center center; background-repeat: no-repeat;\"></div></div></a>";
document.write(thumb);
}

Concretamente, este error:

No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: Open quote is expected for attribute "{1}" associated with an element type "href".

Me parece que busca unas comillas en <a href=\", entre \ y ". Sin embargo, si se las añado ahí (y cierro al final), me sale el mismo error con la etiqueta style, y me da miedo ir añadiendo cosas porque sí.

[Viento]

Blogger se pone muy tontuco con las comillas, a mi me pasó lo mismo. Creo recordar que se solucionaba usando comillas simples e indicándole que es un carácter y no una palabra reservada, eso se consigue poniendo un slash (no el de AC/DC, sino el de la tecla ª)

Code: Select all

 <script>
  function willearThumbnail(youtubeID){
var thumb='<a href=\'javascript:willear(\''+youtubeID+'\');\'><div style=\'background-image: url(\'http://i1.ytimg.com/vi/'+youtubeID+'/hqdefault.jpg\'); width: 480px; height: 360px;\'><div style=\'width: 100%; height: 100%; background-image: url(\'http://www.collegeplus.org/public/img/graphics/fancybox/fancybox_play-button-icon.png\'); background-position: center center; background-repeat: no-repeat;\'></div></div></a>';

document.write(thumb);
}
</script>

[will-o-the-wisp]

Me sigue dando exactamente el mismo error. Y tiene que ser ahí, porque si quito esa parte del código no me dice nada malo D:

Slash es de Guns N' Roses xD

[Viento]

Code: Select all

<script>
function willearThumbnail(youtubeID){
var thumb=&quot;&lt;a href='javascript:willear(&quot;'+youtubeID+'&quot;);'&gt;&lt;div style=&quot;background-image: url(&quot;http://i1.ytimg.com/vi/'+youtubeID+'/hqdefault.jpg&quot;); width: 480px; height: 360px;&quot;&gt;&lt;div style=&quot;width: 100%; height: 100%; background-image: url(&quot;http://www.collegeplus.org/public/img/graphics/fancybox/fancybox_play-button-icon.png&quot;); background-position: center center; background-repeat: no-repeat;&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;&quot;

document.write(thumb);
}

</script>

He cambiado los < y > por su entidad equivalente html. Lo he probado en blogger y se lo come.