Duda: ¿se puede hacer esto con JavaScript en Blogger?

charliepug · 26 Oct 2014

¡Hola! Estoy intentando hacer que en Blogger, cuando pegue la URL de un vídeo de YouTube, automáticamente me lo reemplace por el iframe de inserción. O sea, que yo publique un post con:

http: // www . youtube.com / watch?v=9bZkp7q19f0 (sin espacios, claro)

Y al publicarlo salga con iframe y se inserte:

<iframe width="560" height="315" src="//www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen></iframe>

He encontrado estas líneas, que aquí funcionan Edit fiddle - JSFiddle pero se las he añadido al header y no veo cambio.

$('.post-body').html(function(i, html) {
return html.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="200" height="100" src="http://www.youtube.com/embed/$1" frameborder="0" ></iframe>').replace(/(?:http:\/\/)?(?:www\.)?(?:vimeo\.com)\/(.+)/g, '<iframe src="//player.vimeo.com/video/$1" width="200" height="100" frameborder="0" ></iframe>');

});

¿Hay alguna forma de hacer esto en Blogger o es imposible?

¡Gracias!

Bleed · 26 Oct 2014

Prueba a incluir el codigo a pie de pagina, despues del div con class post-body.

charliepug · 26 Oct 2014

Nop, no me funciona. He probado a ponerlo justo detrás del div, y nada...

Código:

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
            <data:post.body/>
            <div style='clear: both;'/> <!-- clear for photos floats -->
          </div>
<script type="text/javascript">
  $('.post-body').html(function(i, html) {
    return html.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="200" height="100" src="http://www.youtube.com/embed/$1" frameborder="0" ></iframe>').replace(/(?:http:\/\/)?(?:www\.)?(?:vimeo\.com)\/(.+)/g, '<iframe src="//player.vimeo.com/video/$1" width="200" height="100" frameborder="0" ></iframe>');

});
</script>

lobogris · 26 Oct 2014

Te dejo un ejemplo Edit fiddle - JSFiddle

Tendrías que ajustar esto document.body.innerHTML.replace con tu caja, en tu caso sería document.querySelector('.post-body').innerHTML.replace y quitar esto .replace(/</g, '<').replace(/>/g, '>'); que sólo lo puse para la presentación.

charliepug · 26 Oct 2014

Muchísimas gracias por la ayuda, amigos. Entonces tendría que quedar así, ¿no?

Código:

<script type='text/javascript'>
var re = /((\s+|^|>)(?:https?:)?(?:\/\/(?:w{3}\.)?youtu(?:be(-nocookie)?\.[a-z]{2,4}|\.be))\/(?:(embed)\/|watch\?v=|v\/)?(\3(videoseries\?list=))?([a-zA-Z0-9_-]+))/gm;

var p = document.createElement('p');
p.innerHTML = (document.querySelector('.post-body').innerHTML.replace(re, '$2<iframe src="//www.youtube.com/$7"></iframe>'));

document.body.appendChild(p);

</script>

Lo he puesto antes de la etiqueta </head> pero no tranforma la URL en iframe, aquí lo podéis ver: Blog de prueba

lobogris · 26 Oct 2014

charliepug dijo:
Muchísimas gracias por la ayuda, amigos. Entonces tendría que quedar así, ¿no?

Código:

<script type='text/javascript'> var re = /((\s+|^|>)(?:https?:)?(?:\/\/(?:w{3}\.)?youtu(?:be(-nocookie)?\.[a-z]{2,4}|\.be))\/(?:(embed)\/|watch\?v=|v\/)?(\3(videoseries\?list=))?([a-zA-Z0-9_-]+))/gm; var p = document.createElement('p'); p.innerHTML = (document.querySelector('.post-body').innerHTML.replace(re, '$2<iframe src="//www.youtube.com/$7"></iframe>')); document.body.appendChild(p); </script>

Lo he puesto antes de la etiqueta </head> pero no tranforma la URL en iframe, aquí lo podéis ver: Blog de prueba

No, se me olvidó añadir algo xD. Ponlo así:

PHP:

(function (document) {
  var box = document.querySelector('.post-body'), 
      re  = /((\s+|^|>)(?:https?:)?(?:\/\/(?:w{3}\.)?youtu(?:be(-nocookie)?\.[a-z]{2,4}|\.be))\/(?:(embed)\/|watch\?v=|v\/)?(\3(videoseries\?list=))?([a-zA-Z0-9_-]+))/gm;
  
  box.innerHTML = box.innerHTML.replace(re, '$2<iframe src="//www.youtube.com/$7"></iframe>');
})(this.document);

- - - Actualización- - -

Y ponlo entre etiquetas script claro, pero al final del body, justo antes de </body>

charliepug · 26 Oct 2014

Si te cansas de ayudarme lo entenderé, pero sigue sin salir nada

range:

Blog de prueba

lobogris · 27 Oct 2014

No sé si Blogger o tú has cambiado las comillas dobles por simples:

PHP:

(function (document) {
  var box = document.querySelector('.post-body'), 
      re  = /((\s+|^|>)(?:https?:)?(?:\/\/(?:w{3}\.)?youtu(?:be(-nocookie)?\.[a-z]{2,4}|\.be))\/(?:(embed)\/|watch\?v=|v\/)?(\3(videoseries\?list=))?([a-zA-Z0-9_-]+))/gm;
  
  box.innerHTML = box.innerHTML.replace(re, '$2<iframe src='//www.youtube.com/$7'></iframe>');
})(this.document);

así que déjalo así, escapando las comillas:

PHP:

(function (document) {
  var box = document.querySelector('.post-body'), 
       re  =  /((\s+|^|>)(?:https?:)?(?:\/\/(?:w{3}\.)?youtu(?:be(-nocookie)?\.[a-z]{2,4}|\.be))\/(?:(embed)\/|watch\?v=|v\/)?(\3(videoseries\?list=))?([a-zA-Z0-9_-]+))/gm;
  
  box.innerHTML = box.innerHTML.replace(re, '$2<iframe src=\'//www.youtube.com/embed/$7\'></iframe>');
})(this.document);

Y ya que me doy cuenta añado la parte embed a la url sino no no deja poner iframes

charliepug · 27 Oct 2014

¡Ahora sí! Las comillas deben de haberse cambiado solas. Aunque por alguna razón solo convierte el último enlace a YouTube: Blog de prueba

Muchas gracias, por cierto!

También lo quería hacer con Vine, pero para eso ya buscaré a alguien en Fiverr, no voy a darte el coñazo más. XD

lobogris · 27 Oct 2014

charliepug dijo:
¡Ahora sí! Las comillas deben de haberse cambiado solas. Aunque por alguna razón solo convierte el último enlace a YouTube: Blog de prueba

Muchas gracias, por cierto!

También lo quería hacer con Vine, pero para eso ya buscaré a alguien en Fiverr, no voy a darte el coñazo más. XD

Vale, es que hay varios `.post-body`y sólo coge el primero, sustitúyelo de nuevo por:

PHP:

(function (document) {
  var box = Array.prototype.slice.call(document.querySelectorAll('.post-body')), 
       re  =  /((\s+|^|>)(?:https?:)?(?:\/\/(?:w{3}\.)?youtu(?:be(-nocookie)?\.[a-z]{2,4}|\.be))\/(?:(embed)\/|watch\?v=|v\/)?(\3(videoseries\?list=))?([a-zA-Z0-9_-]+))/gm;
  
  box.forEach(function (box) {
      box.innerHTML = box.innerHTML.replace(re, '$2<iframe src=\'//www.youtube.com/embed/$7\'></iframe>');
  });
})(this.document);

Y sobre vine lo mismo, pero cambiando la expresión regular, no tiene complicación

charliepug · 27 Oct 2014

Muchísimas gracias, Lobogris.

Duda: ¿se puede hacer esto con JavaScript en Blogger?

Comparte esta página