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>
<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>
<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>
<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.
Y muchos más artículos interesantes si nos sigues en...
Me encanta lo sencillo pueden ser las cosas y sin tener que andar haciendo brincos y malabares.
ResponderEliminarLa canción de ejemplo ahora ya no me la puedo sacar de la cabeza ¡qué canción!
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?
ResponderEliminarBesos
Creo que ya sabes que son este tipo de trucos los que más me gustan Potro... los más simples :)
ResponderEliminarlaMar, 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 &autoplay=1. Con eso ya funciona. Para más detalle, voy a preparar un post al respecto, pues no eres la primera que pregunta.
También me sumo a la pregunta de laMar...
ResponderEliminarGracias!
Pues la contestación es la misma Enrique. Me pongo con ello.
ResponderEliminarGracias!!! Espero el post para aprender ;))
ResponderEliminarUn beso enorme
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!
ResponderEliminarHola Oloman, buenos dias.
ResponderEliminarQueria 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.
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.
ResponderEliminarMuy buena idea, te felicito.
ResponderEliminarcon 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=""
Agrego por si alguien quiere repetir la canción
ResponderEliminarhay 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>
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.
ResponderEliminarY 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 :)
¡Gracias!
ResponderEliminarMuy clara la explicación.
Saludos.
Oloman ¿tienes correo? te quiero pasa un dato.
ResponderEliminarVku usa un DM de Twitter o Facebook y hablamos ;)
ResponderEliminarNo veo que tengas MD. Igual te voy preguntando algo por acá.
ResponderEliminarYa 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.
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.
ResponderEliminarY 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.
Justo eso Oloman, con un script o modificando el que ya tiene.
ResponderEliminarDespué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.
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.
ResponderEliminarEs 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.
Realmente eso de la condición no lo se hacer o no te entendí. Yo de javascript se muy poco.
ResponderEliminarA 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.
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.
ResponderEliminarLuego, 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.
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.
ResponderEliminarNuevamente gracias por tu tiempo.
Esto me sirvió mucho pero ahora quisiera saber como hago para repetir el vídeo varias beses sin necesidad de poner play?
ResponderEliminarDe antemano gracias
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
ResponderEliminarnuevamente de antemano gracias.
No sé si te refieres a los que Vku comenta en #10 y #11, pero esos son los únicos que conozco.
EliminarSi 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
Eliminargrasias
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...
Eliminarrel=0&loop=1&autoplay=1
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
ResponderEliminarpero 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>