Pero además de que hay que cargar una librería especial para poder hacer todo eso, tampoco es tarea sencilla manejar todo (demo), así que para poder hacer algo nivel torpe, se me ocurrió un sistema muy sencillo para generar al menos algo básico pero muchas veces útil: un botón externo que arranca o para el vídeo... o varios botones si hay varios vídeos.
Como ya va siendo habitual tener jQuery el código está montado con un pequeño JavaScript aprovechando esta librería. El resto lo hace el CSS y con él el botón será como este que ve veis a la derecha y que podéis pinchar para ver como se arranca o reinicia el vídeo que está más abajo.
El truco que usaré es muy simple. Se trata de crear automáticamente un botón que activa una función para leer la dirección del vídeo, añadirle un autoplay y cambiarla por la original en el iframe. De esa manera el vídeo empieza a correr al pulsar el botón. Si se pulsa por segunda vez se realiza la misma tarea pero quitando el autoplay para que el vídeo vuelva a su estado original, es decir, parado esperando instrucciones para comenzar.
¿Funciona la pausa? No. ¿Funcionan otras cosas distintas del play/stop? No. Se trata de un código sencillo que sólo hace esto último.
El código en cuestión es el siguiente y en Blogger puede ir todo seguido en la plantilla, justo antes de </head>.
<style>
.yt-play{position:fixed;top:50%;right:25%;z-index:99;font-family:arial;width:40px;height:30px;background:#cd201f;display:block;margin:5px;box-sizing:border-box;cursor:pointer;border-radius:50% / 10%;color:#fff;text-align:center;box-shadow:0 0 8px #fff}
.yt-play:hover,.yt-play.yt-off:hover .yt-playpausa:after{background:#333;border-color:#333;border-left-color:#fff}
.yt-play:after{content:'';position:absolute;top:10%;bottom:10%;right:-5%;left:-5%;background:inherit;border-radius:5% / 50%}
.yt-play .yt-playpausa{position:absolute;top:6px;left:14px;width:16px;overflow:hidden;z-index:2}
.yt-play.yt-off .yt-playpausa:after{content:"";display:block;border:8px solid #cd201f;border-left:16px solid #fff}
.yt-play.yt-on .yt-playpausa:after{content:"II";position:relative;left:-2px;top:-1px;font-size:20px;line-height:20px;color:#fff;font-weight:700}
iframe[src*="www.youtube.com/embed"]{background:#000}
</style>
.yt-play{position:fixed;top:50%;right:25%;z-index:99;font-family:arial;width:40px;height:30px;background:#cd201f;display:block;margin:5px;box-sizing:border-box;cursor:pointer;border-radius:50% / 10%;color:#fff;text-align:center;box-shadow:0 0 8px #fff}
.yt-play:hover,.yt-play.yt-off:hover .yt-playpausa:after{background:#333;border-color:#333;border-left-color:#fff}
.yt-play:after{content:'';position:absolute;top:10%;bottom:10%;right:-5%;left:-5%;background:inherit;border-radius:5% / 50%}
.yt-play .yt-playpausa{position:absolute;top:6px;left:14px;width:16px;overflow:hidden;z-index:2}
.yt-play.yt-off .yt-playpausa:after{content:"";display:block;border:8px solid #cd201f;border-left:16px solid #fff}
.yt-play.yt-on .yt-playpausa:after{content:"II";position:relative;left:-2px;top:-1px;font-size:20px;line-height:20px;color:#fff;font-weight:700}
iframe[src*="www.youtube.com/embed"]{background:#000}
</style>
<script>
$(document).ready(function() {
$(".post-body").append("<div class='yt-play yt-off'><div class='yt-playpausa'></div></div>");
var datosvid = $(".pos-body iframe[src*='www.youtube.com/embed']")[0].src;
$(".yt-play").on("click", function(ev) {
ev.preventDefault();
if ($(this).hasClass("yt-off")) {
$("iframe")[0].src += "&autoplay=1";
$(this).addClass("yt-on").removeClass("yt-off");
} else {
$("iframe")[0].src = datosvid;
$(this).addClass("yt-off").removeClass("yt-on");
}
});
});
</script>
$(document).ready(function() {
$(".post-body").append("<div class='yt-play yt-off'><div class='yt-playpausa'></div></div>");
var datosvid = $(".pos-body iframe[src*='www.youtube.com/embed']")[0].src;
$(".yt-play").on("click", function(ev) {
ev.preventDefault();
if ($(this).hasClass("yt-off")) {
$("iframe")[0].src += "&autoplay=1";
$(this).addClass("yt-on").removeClass("yt-off");
} else {
$("iframe")[0].src = datosvid;
$(this).addClass("yt-off").removeClass("yt-on");
}
});
});
</script>
No hay que hacer nada más (salvo asegurarse de que jQuery está en la plantilla). Con lo anterior, cada vez que añadáis una vídeo en una entrada, automáticamente se generará el botón externo.
Podéis configurar el CSS como queráis. Para prácticas, cambios y lo que sea menester, en este Codepen tenéis todo lo anterior: http://codepen.io/oloman/pen/MyGMXE.
Para el caso de que habitualmente uséis más de un vídeo por post, entonces podéis utilizar otro código un poco más largo, pero basado exactamente en el mismo truco.
Incluye también más CSS que el anterior para, entre otras cosas, añadir un mensaje emergente cuando se pasa el puntero por encima de la botonera. "Run Pen" para verlo.
See the Pen External automatic play/stop buttons for YT videos by Oloman (@oloman) on CodePen.
Funcionando en real lo tenéis en mi otro blog.
¿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...
Mola.
ResponderEliminarGracias por compartirlo.
Hola, otra vez.
ResponderEliminarQuería consultarte algo. Tengo un par de problemas en una plantilla que no consigo solucionar. El primero es que no encuentro el modo de quitar la numeración de los comentarios, o al menos de poder modificarlos. El otro problema es que dentro de las entradas me salen por duplicado los botones de "Anterior", "Inicio" y "Siguiente"; encima y debajo de los comentarios. Quiero quitar los de debajo, pero haciendo pruebas me desaparecen también los de la portada. Me estoy volviendo loco.
Si me pudieras echar una mano te lo agradecería.
Es mi blog de pruebas: http://austros.blogspot.com
Un saludo.
Hola Psicopompo
EliminarPara lo de la numeracion de comentarios simplemente añade esto a tu CSS:
.comments ol {
list-style: none !important;
margin-left: 0 !important;
}
Para lo otro ya debes acceder a la plantilla y buscar >b:include name='nextprev'/>. Eso es lo que te genera esos enlaces y lo debes tener (al menos) duplicado. Busca ese INCLUDE en tu plantilla y ve probando a eliminar los que encuentres a ver cuál es el que te genera esos enlaces que nos quieres.
Te sugiero que empieces por el último ;)
Gracias. El tema de los números está solucionado al fin.
ResponderEliminarEn cuanto al "b:include name='nextprev'/>", tengo dos en la plantilla. Al borrar uno desaparece el de arriba de los comentarios (que es el que quiero mantener), y si borro el otro, desaparece el de debajo de los comentarios y también el de la portada. Supongo que el código includable lo tengo mal colocado. Voy a seguir indagando.
Muchas gracias.
¿No me dijiste que querías quitar los de abajo? Pues ya lo tienes. Tú mismo dijiste que "si borro el otro, desaparece el de debajo..."
EliminarSí, desaperece el de debajo, dentro y fuera de la entrada (por lo tanto no podría pasar páginas en la página de inicio). Lo que quiero es tener los botones antes de los comentarios dentro de las entradas, y abajo del todo en la página de inicio. Tuve una plantilla hace tiempo en la que lo tenía así, pero no recuerdo cómo lo hice.
EliminarUna vez que elimines los que quieres (que todavía no entendía cuáles son), para añadir nuevos el proceso es el inverso, es decir, aádir un <b:include name='nextpev'/>
EliminarPara que sea antes de los comentarios ponlo en el post-footer-line-3, al final.
En cuanto pueda lo pruebo y te cuento.
EliminarMuchas gracias.
Al final lo he solucionado, pero no como me has sugerido.
EliminarYo tenía dos en mi plantilla. Uno de ellos hacía que los enlaces aparecieran antes de los comentarios (dentro de las entradas). Hasta ahí, bien.
El otro aparecía en la página de inicio, al final del todo.
El problema que yo tenía es que este último código hacía que los botones de navegación me aparecieran también dentro de las entradas, donde ya tenía esos mismos botones encima de los comentarios. Por lo tanto, me salían por duplicado (encima y debajo de la lista de comentarios).
Al parecer, el segundo código estaba incompleto; sólo tenía esto
Así que lo he sustituido por esto:
Después de guardar los cambios me ha desaparecido el duplicado debajo de los comentarios.
Espero haberme explicado mejor esta vez.
Un saludo.
No aparece el código en el post. A ver si entre comillas y con espacios se ve:
Eliminar"< b:if cond='data:blog.pageType != "item"'>
< !-- navigation -->
< b:include name='nextprev'/>
< /b:if >"
Bien. Pues vale también. La cosa es que tenías una condición, cosa que desde este lado no puedo ver pues el código ya aparece interpretado. Enhorabuena ;)
EliminarNo reproduce el video en telefonos moviles
ResponderEliminar