Partage
  • Partager sur Facebook
  • Partager sur Twitter

Non conformité entre Safari et chrome

Différence du placement d'un bouton embedé dans une vidéo selon S/C

    24 novembre 2022 à 12:05:15

    Bonjour à tous, 

    J'ai placé du contenu à savoir le #wrappmute et .mute qui représente l'imbrication dans une vidéo et malheureusement celui-ci n'est pas placé de la même manière selon safari et chrome. Chrome le place responsive par rapport à la vidéo alors que Safari le place par rapport à l'espace total et je n'arrive pas déceler la variable qui crée cette différence entre les deux navigateurs..

    Quelqu'un aurait-il une solution ? 

    Merci à vous, 

    Victor

    <!DOCTYPE html>
    
      <head>
        <meta charset="utf-8">
        <title></title>
      </head>
    
    <style>
    
    html, body {
    font-family: 'Rubik', sans-serif;
    background-color:white;
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    align-items: center;
    justify-content: center;
    background-color:black;
    }
    
    
    input,
    textarea,
    button,
    select,
    a {
      -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
    
    .player{
      /* border: 6px solid rgba(255, 255, 255, 0.2); */
      /*box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.1);*/
      position: relative;
      overflow:hidden;
    
    }
    
    .player:hover .player-controls {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform: translateY(0);
    
    }
    
    
    .video {
     position: relative;
     align-items: center;
     display: flex;
     justify-content: center;
     width: 100%;
     height:100%;
    }
    
    .video_media {
      position: relative;
      max-height: 100vh;
    
      height: inherit;
      width: inherit;
    }
    
    #wrappmute{
    position: absolute;
    display: flex;
    justify-content: center;
    bottom:3%;
    height:20%;
    width: 20%;
    right:3%;
    z-index: 2;
    }
    
    .mute{
    position: absolute;
    display: flex;
    height:70%;
    right:3px;
    z-index:2;
    }
    </style>
    
    <html lang="fr" dir="ltr">
    <body>
    <div class="player">
    
        <div id="videocontainer" class="video">
    
          <video id="video_one" class="video_media" loop
          src="Video Principale.mp4" type="video/mp4">
          </video>
    
    
          <div class="container_leadbutton">
              <div class="toggle-play" onclick="" title="Toggle Play" >
              </div>
              <div class="pause"></div>
                   <div type="buttonmute" id="wrappmute" >
                     <img class="mute" src="Player/unmute.png"></img>
                   </div>
            
          </div>
        </div>
      </div>
    </html>
    • Partager sur Facebook
    • Partager sur Twitter
      24 novembre 2022 à 15:20:15

      Bonjour,

      Ce que tu observes résulte des interprétations différentes que les navigateurs ont lorsqu'ils tentent de corriger des erreurs graves dans le HTML.

      Pour commencer je te conseille donc de mettre de côté le style pour un moment et de commencer par corriger ton HTML. En effet, on ne commence pas la décoration d'une maison avant de construire les fondations.

      Parmi les erreurs les plus évidentes :

      - Pourquoi ta balise '<html lang="fr" dir="ltr">' est-elle en ligne 85 ? Sa place est avant l'ouverture de la balise <head>

      - Ta balise <style> devrait se trouver dans le <head> également

      - Ton <title> est vide

      - Ta balise <body> n'est pas fermée

      - Pas d'espace dans les noms de fichiers

      - Le type="buttonmute" qui n'est pas autorisé ici (à vrai dire je ne sais même pas si ce type existe, je crois que non...)

      Je te conseille d'utiliser le validateur HTML du W3C pour identifier tes erreurs et les corriger plus facilement.

      -
      Edité par Mewen_bzh 24 novembre 2022 à 15:25:11

      • Partager sur Facebook
      • Partager sur Twitter
        24 novembre 2022 à 15:32:04

        Bonjour, en plus de ce qui à été dit la balise </img> n'existe pas et la balise <img> ne sort jamais sans son attribut alt obligatoire. Il sert à indiquer une description textuelle de l'image pour les moteur de recherche mais également pour les personnes qui utilise une synthèse vocale ou que pour quelques raisons que se soit l'image n'est pas affichée le texte de l'attribut alt s'affichera.

        Oui, passez votre code au validateur pour voir et corriger vos erreurs.

        • Partager sur Facebook
        • Partager sur Twitter
          29 novembre 2022 à 13:24:02

          Merci à vous deux ! 

          Victor

          • Partager sur Facebook
          • Partager sur Twitter
            29 novembre 2022 à 13:34:41

            Bonjour, De rien, ;)

            Sujet résolu

            Tu peux passer le sujet à "résolu" (bouton en haut à droite du sujet) et cliquer sur les pouces levés des messages qui t'ont aidé⋅e ;)
            • Partager sur Facebook
            • Partager sur Twitter

            Non conformité entre Safari et chrome

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            • Editeur
            • Markdown