Use los botones de reproducción interactivos (similar al mouse sobre)

Un usuario preguntó 👇

¿Existe una función JS que permita que el botón de reproducción cambie un estado similar al de un mouse similar al que presenta Youtube? En particular, no quería usar el objeto iframe si fuera posible.

Propósito:

Poder mostrar un botón de reproducción de video (con 2 estados) sobre una imagen vinculada a través de EFB. Esto permitiría, cuando el mouse sobre el estado = verdadero, cambiar la imagen del video de reproducción. Aquí hay un enlace de referencia: https://css-tricks.com/play-button-youtube-and-vimeo-api/

wB

Este tema fue modificado hace 3 años por. Este tema fue modificado hace 3 años por.

(@ravanh)

hace 3 años

Hola,

Fancybox no cambia el aspecto de la página normal, por lo que no agrega botones ni efectos de deslizamiento. Pero puede agregarlos a su hoja de estilo (o campo CSS personalizado) usted mismo.

Algo como esto le daría una clase CSS de aumento sobre enlaces de imágenes elegantes:

/* pure css magnifying glass over fancybox links */
.fancybox.image {
    position: relative;
    display: inline-block;
}
.fancybox.image::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    border-radius: 30px;
    height: 46px;
    width: 46px;
    margin: -25px 0 0 -30px;
    border: 4px solid #fff;
}
.fancybox.image::after {
    content: "";
    height: 9px;
    width: 18px;
    border-radius: 0 5px 5px 0;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 15px 0 0 5px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
}
.fancybox.image:hover::before {
    content: "+";
    color: #fff;
    line-height: 42px;
    font-size: 42px;
    text-align: center;
    text-indent: -1px;
}

… con signo + como efecto de desplazamiento …

La posición de la lupa dependerá de otras reglas CSS, como los márgenes de la imagen, que pueden diferir según la alineación (izquierda / derecha / centro). Por lo tanto, tendrá que adaptarse para que se vea bien en su sitio.

(@wireb)

Hace 2 años, 7 meses

Perdón por mi respuesta tardía respondiendo con respeto, gracias.

wB

Esta respuesta fue modificada hace 2 años, 7 meses.

¿Solucionó tu problema??

SíNo

0 / 0