1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies. En savoir plus.
  2. Bonjour tout le monde ! Veillez consulter la Politique de forum pour comprendre nos règles, Merci a vous !
    Rejeter la notice

Vidéo en fond d'écran

Discussion dans 'Webdev' créé par jeanturcotte2020, Oct 11, 2023.

  1. jeanturcotte2020

    Inscrit:
    Nov 25, 2020
    Messages:
    82
    J'aime reçus:
    11
    Est-ce qu'il est possible de faire jouer une vidéo en fond navigateur? J'ai trouvé des méthodes en HTML5 et ça semble assez facile mais en webdev?
     
    Tags:
  2. jeanturcotte2020

    Inscrit:
    Nov 25, 2020
    Messages:
    82
    J'aime reçus:
    11
    J'ai fini par trouver une solution.
     
  3. kabeda

    kabeda Active Member

    Inscrit:
    Avr 23, 2018
    Messages:
    173
    J'aime reçus:
    63
    Bonjour,
    ça serait bien de partager ton expérience en postant ta solution.
     
    Isabelle apprécie ceci.
  4. jeanturcotte2020

    Inscrit:
    Nov 25, 2020
    Messages:
    82
    J'aime reçus:
    11
    C'est plus simple qu'il n"y parait, il s'agit d'insérer un composant WEB avec le code HTML suivant;
    <video id="background-video" autoplay loop muted>
    <source src="../ext/video.webm" type="video/webm">
    </video>
    et le code CSS suivant;
    #background-video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -100;
    overflow: hidden;
    }
    Tout les champs de la page doivent être en superposition. Ça ne fonctionne pas à partir d'un modèle et j'ai contacté le ST pour que ça fonctionne en multilangage.
    Vous pouvez aussi ajouter des champs directement en HTML et les ajuster en CSS mais ils ne sont pas accessibles en WW, vous devrez galèrer en JS
     
  5. popoy

    popoy Well-Known Member
    MEMBRE WX

    Inscrit:
    Fev 23, 2018
    Messages:
    2,885
    J'aime reçus:
    1,533

    Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

    C'est plus simple qu'il n"y parait, il s'agit d'insérer un composant WEB avec le code HTML suivant;
    <video id="background-video" autoplay loop muted>
    <source src="../ext/video.webm" type="video/webm">
    </video>
    et le code CSS suivant;
    #background-video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -100;
    overflow: hidden;
    }
    Tout les champs de la page doivent être en superposition. Ça ne fonctionne pas à partir d'un modèle et j'ai contacté le ST pour que ça fonctionne en multilangage.
    Vous pouvez aussi ajouter des champs directement en HTML et les ajuster en CSS mais ils ne sont pas accessibles en WW, vous devrez galèrer en JS
    Cliquez pour agrandir...
    En fait, tu as fait du HTML
    C'est tellement plus simple
    C'est aussi pour cela que j'ai arrêté webdev
     
  • jeanturcotte2020

    Inscrit:
    Nov 25, 2020
    Messages:
    82
    J'aime reçus:
    11
    Je sais bien que WW n'est pas parfait mais je m'en accommode quand même assez bien! avec un peu de HTML et JS, je réussi à faire à peu près tout ce que je veux.
     
  • Partager cette page

    Chargement...