Español
es

¿Cómo cambiar la miniatura de un video de YouTube incrustado?

12 dic 2017, 19:11:06
Vistas: 38.2K
Votos: 3

Cuando incrustro un video de YouTube en mi página, ¿hay alguna manera de cambiar la miniatura que se muestra (captura de pantalla)? No tengo acceso de administrador al video de YouTube en cuestión.

Preferiría una solución sin plugins si es posible. Encontré estas instrucciones, pero no funcionaron.

incrustar youtube
3
Comentarios

@Nicolai Gracias por eso. ¿Puedes enlazar documentación sobre el shortcode [video]? Estoy incrustando simplemente pegando la URL de Youtube en la página. Luego permito que la funcionalidad incorporada de WordPress lo convierta al código fuente apropiado. Tenía la impresión de que usaba el shortcode [embed] (pero podría estar equivocado). En cualquier caso, algo que me permita establecer la miniatura parece ser lo que necesito.

cag8f cag8f
12 dic 2017 19:16:26

OK gracias. Lo implementé, y efectivamente puedo cambiar la miniatura predeterminada. Pero tiene el costo de un reproductor de video ligeramente diferente (comparación en captura de pantalla https://imgur.com/a/QVGKL). El shortcode [video] cambia el reproductor de video a uno incorporado en WordPress, que no tiene el estilo familiar de Youtube, y también carece del enlace de configuración y el enlace 'ver en Youtube' (que me gustan). Idealmente, si es posible, me gustaría mantener todo sobre el reproductor de Youtube igual excepto por la miniatura. ¿Puedo hacerlo tal vez con JavaScript personalizado?

cag8f cag8f
12 dic 2017 19:36:04

OK gracias. ¿Podemos dejar esto abierto por un día o dos para permitir que otros lean/comenten? Tal vez estaría abierto a una solución con plugin.

cag8f cag8f
12 dic 2017 19:43:52
Todas las respuestas a la pregunta 2
10
3

El [video] shortcode puede usarse con el src siendo una URL de un video de YouTube. Para establecer una imagen de vista previa o miniatura, utiliza poster, e incluso funciona correctamente mediante la interfaz gráfica. Al final, debería verse similar al siguiente ejemplo.

[video src="https://www.youtube.com/watch?v=XYZ" poster="http://example.com/wp-content/uploads/2017/01/example.jpg"]
12 dic 2017 19:31:08
Comentarios

He implementado esto (página aquí http://kabultec.org/blog/events/annual-afghan-womens-benefit-dinner-2017/). Con esto, efectivamente reemplacé la miniatura que se muestra antes de que el video se reproduzca. Pero cuando el video termina de reproducirse, muestra la miniatura original de inicio, la misma miniatura de inicio que quiero ocultar (captura de pantalla https://imgur.com/t8N1dPf). ¿Alguna idea de cómo resolver esto? Incluso una pantalla en negro sería una solución en este caso. La motivación para este ejercicio es reemplazar u ocultar esta miniatura en particular en todo el sitio.

cag8f cag8f
15 dic 2017 13:45:52

Eliminar &rel=0 no funcionó, y no soy el propietario de este canal de Youtube. ¿A qué <div> te refieres exactamente? No puedo encontrar ningún elemento con una clase de ytp-cued-thumbnail-overlay (o similar).

cag8f cag8f
16 dic 2017 11:37:50

OK. Busqué en el código fuente ytp-cued-thumbnail pero no pude encontrarlo (captura de pantalla: https://imgur.com/POsfj4r). ¿No debería aparecer ahí? ¿O estoy entendiendo algo mal? ¿Podrías enviarme una captura de pantalla que indique su presencia? No es que no te crea, pero podría ayudarme a entender dónde me estoy equivocando.

cag8f cag8f
17 dic 2017 14:37:11

OK. Esa clase es agregada a la página por el embed de Youtube, así que estaba faltando en mi página, ya que cambié al shortcode [video]. Pero esta nueva solución me resulta un poco más atractiva, es decir, mantener el embed de Youtube y cambiar la miniatura mediante JavaScript. He revertido al embed de Youtube (http://kabultec.org/dev/blog/events/benefit-dinner-2016/) pero estoy teniendo problemas para apuntar a la clase. Específicamente, al cargar la página, document.getElementsByClassName("ytp-cued-thumbnail-overlay-image")[0]; es undefined. Pero después de inspeccionar el elemento, devuelve la clase en cuestión. ¿Alguna idea?

cag8f cag8f
19 dic 2017 15:23:19

¿Quizás esto amerita una pregunta separada en Stack Overflow?

cag8f cag8f
19 dic 2017 15:23:40

OK. Mantengamos esta pregunta abierta un poco más mientras confirmo que esta nueva solución es viable. Actualizaré esta pregunta una vez que esa investigación esté completa.

cag8f cag8f
20 dic 2017 11:03:50

¿Se han eliminado todos tus comentarios en este hilo? Así parece desde mi lado. De todos modos, parece que no puedo modificar esa clase en particular con un archivo JavaScript del lado del servidor (ver aquí https://www.reddit.com/r/learnjavascript/comments/7l1cq0/cannot_target_class_unless_i_first_inspect/). Supongo que podría intentar superponer un JPG separado sobre ese elemento con CSS, pero eso parece relativamente frágil. A menos que veas otra posible solución/alternativa, estoy inclinado a marcar la respuesta [video] como la solución.

cag8f cag8f
21 dic 2017 11:24:29

@cag8f Solo estoy limpiando el ruido. Realmente no tengo otra solución. Personalmente, ni siquiera me molestaría con esto para empezar, para ser honesto. Simplemente no vale la pena el problema.

Nicolai Grossherr Nicolai Grossherr
21 dic 2017 17:31:57

No pensé que fueran ruido, pensé que eran parte de una discusión saludable e informativa. Pero bueno. Marcaré tu respuesta [embed] como la solución.

cag8f cag8f
22 dic 2017 10:32:20

@cag8f Así no es como funciona el sistema aquí, no es como un foro abierto. Hubiera dejado la discusión en su lugar – o incluso hubiera dado otra respuesta –, si hubiera contenido una solución adicional probada. Pero no lo hizo, al menos desde mi punto de vista. Y como los comentarios se limpian tarde o temprano de todos modos, prefiero limpiarlos yo mismo, en lugar de dejar que lo hagan otras personas.

Nicolai Grossherr Nicolai Grossherr
25 dic 2017 01:33:05
Mostrar los 5 comentarios restantes
0
0

Echa un vistazo a esto, quizás te ayude.


<div class="video-responsive"><iframe src="https://www.youtube-nocookie.com/embed/1Cz2Xzm6knM/videoseries?list=PLq-1Cz2Xzm6knM-1Cz2Xzm6knM&amp;rel=0" width="420" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>


.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
29 jul 2020 11:24:24
Preguntas relacionadas
Habilitar Gutenberg en un tipo de entrada personalizada
2
respuestas
Obtener atributos de producto Simple en WooCommerce
2
respuestas
¿Cómo puedo solucionar: "Notice: Undefined offset: 0"?
5
respuestas
¿Cómo mostrar publicaciones del usuario/autor actual en una plantilla de página personalizada?
2
respuestas
Dar prioridad a la hoja de estilos del tema hijo
3
respuestas
Eliminar el enlace del producto en Woocommerce
5
respuestas