Transformación CSS y incrustaciones de YouTube

El uso de las transformaciones css en una incrustación de YouTube hace que el video sea negro al menos en Safari 5 y Firefox 4. Chrome 11 lo maneja perfectamente.Transformación CSS y incrustaciones de YouTube

que he hecho aquí un ejemplo: http://jsfiddle.net/oskarrough/4vRzd/4/

necesito el css transformada con el fin de hacer un poco de fantasía de posición de diseño. ¿Hay alguna forma, css o js, de hackearlo para mostrar el video?

Fuente

2011-04-15 donleche

Estoy enfrentando el mismo problema (¡excepto que se apaga en Chrome y está bien en los demás!) - ¿Has encontrado una solución por casualidad? – 828

para mí desplaza el contenido del reproductor en Chrome ... –

¿Seguro que no se puede utilizar en su lugar:

iframe { 
    position: relative; 
    top: 100px 
}

http://jsfiddle.net/4vRzd/5/

O margin-top: 100px, o una negativa margin en algún otro elemento?

Alguien tuvo que publicar esto, porque no mencionó que no son opciones viables.

Fuente

2011-04-15 10:33:30 thirtydot

Debería haber aclarado, necesito usar la transformación css. Parece que el problema es el soporte del navegador, lo que significa que no podemos hacer nada más que esperar en este momento. – donleche

Estoy abordando el mismo problema en este momento. No estoy haciendo ninguna fantástica transformación de CSS, simplemente escalando.

Aunque no funcionaba a la perfección, obtuve el video para mostrar usando la opción wmode = transparent.

es decir

<iframe width='640' height='480' frameborder='0' src='http://www.youtube.com/embed/YOUTUBE_VIDEO_ID?wmode=transparent' type='text/html' class='youtube-player'></iframe>

Fuente

2012-04-30 08:32:14 lawrenceshen

Un comentario tardío, pero también soluciona un error fadeout/fadein en el que un video incrustado de ifraube de YouTube no se desvanece con jQuery en Safari para Windows 5.1.x. Gracias. – ReactingToAngularVues

Upvote para lawrenceshen.

La wmode = transparente funcionó.

var player; 
     function onYouTubeIframeAPIReady() { 
      console.log("onYouTubeIframeAPIReady"); 
      player = new YT.Player('gallery-youtube', { 
       height: '594', 
       width: '883', 
       videoId: 'u1zgFlCw8Aw', 
       playerVars: { "modestbranding":1, "wmode":"transparent" }, 
       events: { 
        'onReady': onPlayerReady, 
        'onStateChange': onPlayerStateChange 
       } 
      }); 
     }

Fuente

2013-01-31 18:56:29 user890648

Para mí, este problema sólo se produjo en Firefox 4 en Windows 7 y Windows 8. No sucedió en ningún otro navegador ni en OS X.

Pasé horas atascado en este problema. Expongo videos de YouTube en un modal que usa traducciones CSS3 para mostrarlas.

Mi solución fue eliminar las clases de transformación/transición una vez que el modal apareció.
Una vez que lo hice aparecieron las incrustaciones de YouTube y ya no había ninguna caja negra vacía.

Más detalles: Yo uso animate.css y añadir class = "fadeInDownBig animada" para deslizar el modal hacia abajo. Una vez que ha alcanzado su destino final, elimino esas clases nuevamente.

Es un problema realmente extraño que espero que solucione Mozilla muy pronto.

Fuente

2013-02-06 09:45:10

Transformación CSS y incrustaciones de YouTube

Respuesta

Cuestiones relacionadas