¿Cómo puedo mostrar un video solo si está visitando mi sitio web con una PC con consultas de medios? Simplemente no sé cómo configurar la consulta en CSS o tal vez no existe algo como esto. ¿Alguien puede ayudarme?

El siguiente es un ejemplo de una consulta que cambia el fondo del cuerpo del sitio si su dispositivo es un teléfono móvil.

  @media only screen and (min-device-width : 320px) and (max-device-width : 700px) and (orientation : portrait) {
  body {
    background-image: url(http://objectfilms.altervista.org/background-mobile.jpg);
    background-repeat:no-repeat;
    background-position: absolute; 
    background-size:100%;
  }    
}

Necesito algo así, pero para un video en lugar de fondo, más o menos así:

@media only screen and (min-device-width : 1200px) {
  #video /* suppose the video has thid id */
    video:url (the url of the video)

}
-1
Francis7 4 mar. 2017 a las 20:55

2 respuestas

La mejor respuesta

Puede intentar usar consultas de medios en css. Esto será útil si su video está en primer plano, no en segundo plano.

La resolución 1024 o superior se utiliza para PC / escritorio.

@media (max-width: 1024px) {

  .videobox{
    display:none;
  }
}
-1
Phantom 4 mar. 2017 a las 18:04

En realidad, esta es la etiqueta correcta (para evitar que tablet-landscape pueda ver el video)

@media screen and (max-width: 1024px) , screen and (max-height: 768px) { .video-div {display:none} }
0
Dražen 4 mar. 2017 a las 18:22