Puis-je cacher la balise vidéo html5 sur tout sauf les ordinateurs de bureau?

Question

Existe-t-il un moyen de le faire? Je ne veux pas que la vidéo apparaisse sur les tablettes ou les téléphones.

Answer 1

1. détecter la largeur des requêtes des médias ou JS
css
2. tablettes Android ont "mobile" dans leur agent utilisateur du navigateur, ios est facile à détecter.
3. détecter le support de la balise vidéo avec modernizr.

Answer 2

Utiliser des requêtes médias CSS comme ceci:

@media screen and (max-width: 680px) 
{ 
    .video { display : none; } 
} 

Cela permet de masquer la .video de classe pour tous les écrans jusqu'à 680px de large

Edit: Vous pouvez bien sûr faire aussi ce l'inverse, Par défaut, définissez .video sur display: none, puis utilisez min-width dans une requête multimédia pour l'afficher réellement à partir d'une certaine largeur.

Answer 3

Oui, avec les requêtes des médias:

<div id="video"> 
    //Video here 
</div> 

@media only screen and (max-width: 500px) { 

    #video { 
     visibility: hidden; 
    } 

} 

Cela cacher la div avec l'ID de « vidéo » pour plus petit que 500px tailles d'écran (ou quelle que soit la largeur pixel vous déterminez).