Código de CSS - Poner un vídeo de youtube encima de una imagen

Imágen de perfil
Val: 624
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Poner un vídeo de youtube encima de una imagengráfica de visualizaciones


CSS

Publicado el 22 de Octubre del 2015 por Xve (294 códigos)
15.821 visualizaciones desde el 22 de Octubre del 2015
Este código posiciona un vídeo de youtube encima de una imagen de un monitor, simulando que el vídeo se emite desde una pantalla dentro de la web.

youtube-over-image


Este código lo he desarrollado para contestar una pregunta del foro de HTML.

Versión 1.0
estrellaestrellaestrellaestrellaestrella(6)

Publicado el 22 de Octubre del 2015gráfica de visualizaciones de la versión: Versión 1.0
15.822 visualizaciones desde el 22 de Octubre del 2015
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Si alguno de los archivos de descarga no funciona, comentanos aquí el error.




Comentarios sobre la versión: Versión 1.0 (6)

javier
10 de Octubre del 2016
estrellaestrellaestrellaestrellaestrella
Buena idea.
Responder
SharkGalicia
18 de Diciembre del 2016
estrellaestrellaestrellaestrellaestrella
Saludos Cordiales . . . Llevaba un Tiempo Intentando Implementar Justo lo que Aquí Comentan en las Entradas de uno de los Blogs que Administro .

Lo he Intentado de Todas las Formas Posibles Utilizando su Código y no he Conseguido que se Muestre Cómo en la Imagen Superior

Les Agradecería una Ayuda ya que Desconozco que Estoy Haciendo Mal

Un Saludo . . . Gracias
Responder
TopoLis54
16 de Febrero del 2021
estrellaestrellaestrellaestrellaestrella
Mira este código , creo que te puede valer.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
 
<body>
</body>
<video
        controls
        preload="auto"
        poster="https://buzgrw.ch.files.1drv.com/y4mQ9ooV58DjDPumn0svK30bwzcihzwm-J7cH3nIW8FpxnIGW0F3FEhIskGMz29o5c9cfc9WTPF8ZliSisUSYAyPx1lfPGst3Y_7rHUcN7xuT-i7C05gJHuj4DhtTpYQY4Y7LKegGr_BR3rgLbIXjDhCdrWdCIYhOcQI7xKJlHlotJnUNuXR3H235MjNLhqaY_8o9ym1JkFhhR5R4L9oFy8AA/ChicaEnRosa.gif?psid=1"
        data-setup='{ "fluid": true }'
      >
        <source
          src="https://onedrive.live.com/download?resid=89B512DD4A7B7939%2115531&authkey=AEOEq3s010V3eG8"></video>
</html>
Responder
Fernando Vega
15 de Abril del 2017
estrellaestrellaestrellaestrellaestrella
funciona a la perfeccion, mucgas gracias
Responder
JA++
30 de Junio del 2017
estrellaestrellaestrellaestrellaestrella
Genial... excelente aporte...
Responder
Gerardo
20 de Junio del 2018
estrellaestrellaestrellaestrellaestrella
Como colocar una imagen encima de un video como el logo por ejemplo en una etiqueta de video htnl5
Responder

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s3316