Variante para usar YouTube como reproductor de audio | Oloblogger Gracias a Mandelrot que nos comentó que había publicado este sistema en su blog, conocimos otra for...

31 de marzo de 2011

Variante para usar YouTube como reproductor de audio

Gracias a Mandelrot que nos comentó que había publicado este sistema en su blog, conocimos otra forma de conseguir el truco para insertar sólo audio desde YouTube.

En aquel, dejábamos la carátula del reproductor sin la parte de vídeo y luego podíamos ir acortando lo que quedaba por el centro. Pero siempre nos quedaban las puntas; al menos el botón del play, el del volumen y el de pantalla completa. Sin embargo, con este otro sistema podremos truncar por la derecha.

Para empezar, al iframe del reproductor original le cambiamos igualmente la altura por 27px. Lo diferente ahora es que luego  metemos todo dentro de un div más pequeño que el reproductor y a ese div le añadimos un overflow:hidden; para que trunque el contenido y no se vea la parte derecha.

Así, esto...

<iframe title="YouTube video player" width="425" height="349" src="http://www.youtube.com/embed/bg8EQdcud7Q?rel=0" frameborder="0" allowfullscreen></iframe>


...lo transformamos en esto:

<div style="overflow:hidden;width:252px;">
<iframe title="YouTube video player" width="425" height="27" src="http://www.youtube.com/embed/bg8EQdcud7Q?rel=0" frameborder="0" allowfullscreen></iframe>
</div>


Para calcular el ancho del div, usamos estas medidas de la barra del reproductor:


Por tanto, para quitar el primer trozo de la derecha, restamos al ancho del código original la cantidad de 173px. (425-173=252px, en el ejemplo)

Si queremos reducirlo más para dejar sólo los dos primeros botones, entonces fijamos el div en 63px.

<div style="overflow:hidden;width:63px;">
<iframe title="YouTube video player" width="425" height="27" src="http://www.youtube.com/embed/bg8EQdcud7Q?rel=0" frameborder="0" allowfullscreen></iframe>
</div>


Y si queremos un auténtico reproductor minimalista, lo dejamos en 32px:

<div style="overflow:hidden;width:32px;">
<iframe title="YouTube video player" width="425" height="27" src="http://www.youtube.com/embed/bg8EQdcud7Q?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

28 comentarios :

  1. Me encanta lo sencillo pueden ser las cosas y sin tener que andar haciendo brincos y malabares.
    La canción de ejemplo ahora ya no me la puedo sacar de la cabeza ¡qué canción!

    ResponderEliminar
  2. Me encanta la idea, gracias pero hay alguna manera de que le reproductor sea automático, es decir, sin que haya que darle al play?
    Besos

    ResponderEliminar
  3. Creo que ya sabes que son este tipo de trucos los que más me gustan Potro... los más simples :)

    laMar, un placer "verte" por aquí. La manera es usando el código antiguo, que puedes obtener pinchando la casilla de verificación correspondiente desde YouTube. Luego tienes que añadir un &amp;autoplay=1. Con eso ya funciona. Para más detalle, voy a preparar un post al respecto, pues no eres la primera que pregunta.

    ResponderEliminar
  4. También me sumo a la pregunta de laMar...
    Gracias!

    ResponderEliminar
  5. Pues la contestación es la misma Enrique. Me pongo con ello.

    ResponderEliminar
  6. Gracias!!! Espero el post para aprender ;))
    Un beso enorme

    ResponderEliminar
  7. Estupendo truco!! Ya me pasaba que me preguntaba cómo hacerlo y nada, solo sabía el truco de poner en 27 y listo; pero esto es simplemente genial!

    ResponderEliminar
  8. Hola Oloman, buenos dias.

    Queria felicitarte por tu trabajo en el que se ve que le dedicas tiempo y mucho entusiasmo para gente como yo u otros que preferimos Blogger avanzemos y aprendamos.
    Hace un tiempo tengo mi blog presentado en forma de pagina tradicional (parece) y tiene el dominio www.losviejosmuchachos.com.ar (es un blog diseñado), tendria que hacerte una consulta ya que a lo mejor sabes.
    Yo quiero que las entradas vallan en columnas, ahi se ve que hay 2 columnas de 2 entradas cada una, pero yo quisiera que sea de la siguiente forma:
    La entrada principal (la de arriba) seguida por 3 entradas de 1 columna y luego 6 entradas en 2 columnas, ¿me explico? ¿se puede lograr eso?.

    Lo saludo atte.

    ResponderEliminar
  9. No se como hacer para saber cuando responde, mi email es: losviejosmuchachos@live.com.ar o bien si puede usted dejar un email para que yo lo contacte, estare muy agradecido.

    ResponderEliminar
  10. Muy buena idea, te felicito.

    con tu permiso te dejo el código con autoplay

    <iframe title="YouTube video player" width="425" height="27" src="http://www.youtube.com/embed/bg8EQdcud7Q?autoplay=1" frameborder="0"></iframe>

    lo que quite fue allowfullscreen que no entiendo como youtube lo pone así, en tal caso tendría que ser allowfullscreen=""

    ResponderEliminar
  11. Agrego por si alguien quiere repetir la canción

    hay que cambiar "embed" por "v" y agregar &loop=1

    <iframe title="YouTube video player" width="425" height="27" src="http://www.youtube.com/v/bg8EQdcud7Q?autoplay=1&loop=1" frameborder="0"></iframe>

    ResponderEliminar
  12. Pelin, no se me ocurre cómo se podría hacer lo que pretendes. Sí es relativamente fácil hacer el primer post de una manera y el resto de otras, tal y como lo tienes ahora. Pero hacer el primero en una columna, otros en dos y otros en tres, va a ser que no. Si averiguas qué se podría usar para ello, por favor lo comentas.
    Y para saber cuando te contestan en un post, justo a la derecha del botón "Publicar un comentario", tienes un enlace para recibir un aviso por correo cuando alguien escriba algo ;)

    Gracias Vku ¡me has chafado un post!
    Es broma :D
    Es lo que intenté explicar de forma muy resumida en #3, pero ya he programado una entrada para hacerlo de forma más extensa. Gracias de veras :)

    ResponderEliminar
  13. ¡Gracias!
    Muy clara la explicación.
    Saludos.

    ResponderEliminar
  14. Oloman ¿tienes correo? te quiero pasa un dato.

    ResponderEliminar
  15. Vku usa un DM de Twitter o Facebook y hablamos ;)

    ResponderEliminar
  16. No veo que tengas MD. Igual te voy preguntando algo por acá.

    Ya que vi que manejas bien el código de entradas reducidas, te lo pregunto a vos.

    ¿Sabes alguna forma en blog con entradas reducidas en la cual puedas elegir la cantidad de texto por entrada. Ej: la entrada 3: 400 y la entrada 5: 300.?

    Estoy con un nuevo proyecto en un blog con el estilo parecido al que quiere Pelin.

    ResponderEliminar
  17. Vku, sólo se me ocurre editar el script y poner allí alguna condición con JavaScript. No sé si esa idea cuadrará con la que tú llevas en la cabeza.

    Y por cierto, esta puede ser también una solución para Pelin: usar resúmenes y en el script ir contando; luego según el número, dar un estilo u otro.

    ResponderEliminar
  18. Justo eso Oloman, con un script o modificando el que ya tiene.

    Después fíjate mi blog, con un contador logre ponerle un Id distinto a cada entrada y poder personalizar a gusto cada una. Si, se puede modificar los tamaños, ancho, color, texto, etc... las imágenes mostrarlas una arriba otra a la izquierda, de distinto tamaño, como uno quiera, se puede hacer columnas de 2, 3, 4..., pero no logre achicar el texto a mostrar, siempre en todas muestra la misma cantidad y estaría bueno en las columnas mostrar menos texto para que no se haga tan largo. Y creo que si, es lo que buscaba Pelin. si quieres te paso el código, pero no he podido por twitter ni facebook ya que no tienes para MD.

    ResponderEliminar
  19. A ver Vku, veo que usas una variante del script que uso yo. Si ya tienes individualizadas las ID, sólo se trataría de poner unas condiciones en el código Javascript, para cambiar en cada caso, la variable que controla el número de caracteres, summary_img.

    Es decir, dentro de la condición, si el post es por ejemplo el 1, entonces summary_img=X; si es el 2 summary_img=Y; etc.

    Por cierto, siempre accedo a posts concretos tuyos y no había visto la página de inicio. Está bien el truco... y yo explicándote cómo hacerlo jajajajja.

    ResponderEliminar
  20. Realmente eso de la condición no lo se hacer o no te entendí. Yo de javascript se muy poco.

    A veces uno se tranca con algunos de los códigos y otros lo pueden ver de mejor forma.

    Lo pude hacer con display none en algunas entradas y cambiando el código así:

    summ = 400; summ2 = 100;
    }
    var summary = imgtag + '<div class="b1">' + removeHtmlTag(div.innerHTML,summ) + '</div>' + '<div class="b2">' + removeHtmlTag(div.innerHTML,summ2) + '</div>';
    div.innerHTML = summary;

    Y en css

    #contaentrada2 .b1, #contaentrada3 .b1{display:none}

    #contaentrada4 .b2, #contaentrada5 .b2, #contaentrada6 .b2, #contaentrada7 .b2{display:none}

    Si te das cuenta de hacerlo mas sencillo me avisas. Gracias.

    ResponderEliminar
  21. No. Más sencillo no se me ocurre. Sólo era otra manera. En un principio yo hubiera puesto en la parte de loop de entradas un contador con JavaScript (c=c++;) para determinar el número de post en el que me encuentro.
    Luego, en el script con unos if-else o con un case, hubiera cambiado el valor de summary_img (la variable que contiene la cantidad de caracteres a mostrar) para cada número. Por ejemplo, la 1 100, la 2 50, la 3 50, la 4 otra vez 100...

    La ventaja de tu sistema es que además ya aprovechas las clases contaentrada para dar el formato y el mío sólo fijaría el número de caracteres y luego habría que hacer lo otro. A mí me parece bien como lo has hecho.

    ResponderEliminar
  22. Gracias Oloman, si supieras todas las pruebas que he hecho y está ultima mas sencilla por suerte me resulto. Probé con if - else, hasta con new Array y sin resultados o con un código larguísimo.
    Nuevamente gracias por tu tiempo.

    ResponderEliminar
  23. Esto me sirvió mucho pero ahora quisiera saber como hago para repetir el vídeo varias beses sin necesidad de poner play?

    De antemano gracias

    ResponderEliminar
  24. siento molestar nuevamente pero veo que hay códigos que pueden servirme pero no lo asen estos son el loop y otros pero son mas largos y el loop no me fusiona

    nuevamente de antemano gracias.

    ResponderEliminar
    Respuestas
    1. No sé si te refieres a los que Vku comenta en #10 y #11, pero esos son los únicos que conozco.

      Eliminar
    2. Si así es es el mismo código que me genera youtube pero con otro link obiamente pero corrijo que para autoplay se modifico el código y ahora es ?rel=0&autoplay=1 este es el nuevo código, pero no puedo loopearlo! tienes una idea que me pueda servir

      grasias

      Eliminar
    3. Pues no. Lo de la repetición no sé cómo va actualmente. Lo siento. Sólo sé lo de añadir un loop=1, pero si no funciona...
      rel=0&loop=1&autoplay=1

      Eliminar
  25. no ese código no me fusiona ya lo he intentado.. pero con tu permiso dejo como me corre con autoplay pero no puedo hacer que se repita
    pero si es el mismo codigo de Vku


    width="1" height="1" volume="100" src="el enlace de youtuve/embed/x94m407UJSI?rel=0&autoplay=1" frameborder="0" allowfullscreen>

    ResponderEliminar