2
votes

Comment centrer un bouton dans l'espace restant à côté d'une vidéo centrée

Je veux faire cette mise en page avec CSS:

La <video> (son format et sa taille peuvent changer) doit être centrée verticalement et horizontalement dans le conteneur avec un arrière-plan noir (la taille du conteneur peut également changer). Le <button> doit être centré dans l'espace restant sur le côté droit de la <video> . S'il n'y a plus d'espace pour le bouton, il doit superposer la <video> .

Voici ce que j'ai actuellement:

<div style="height: 200px; width: 700px;">
  <video src="https://static.videezy.com/system/protected/files/000/019/696/pointing_blue.mp4" autoplay muted loop></video>
  <button></button>
</div>

div {
  background-color: black;
  position: relative;
  resize: both;
  overflow: hidden;
}

video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
video:focus {
  outline: none;
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 16px;

  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
  border: 5px solid white;
}

mais je ne sais pas comment centrer le bouton

css

0 commentaires

3 Réponses :

1
votes

Flex (encore) et un pseudo peuvent vous aider sans position:

<div style="height: 200px; width: 700px;">
  <video src="https://static.videezy.com/system/protected/files/000/019/696/pointing_blue.mp4" autoplay muted loop></video>
  <button></button>
</div>

div {
  background-color: black;
  position: relative;
  resize: both;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: 0 -50px;
}

video:focus {
  outline: none;
}

div:before {
  content: '';
  width: 50px;
  margin: -100px;
}

button {
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
  border: 5px solid white;
  margin: -100px;
 
}

2 commentaires

Cela fonctionne si le conteneur est plus large que haut, mais s'il est plus haut que large, le bouton est pressé. Il serait préférable que le bouton superpose ensuite la vidéo.

Vous pouvez jouer avec des marges négatives, extrait de code mis à jour

0
votes

Vous pouvez résoudre le problème en le modifiant à partir de la right: 16px; à right: 9%; dans le button{} ligne 4. J'espère que cela résout votre problème

<style>
div {
  background-color: black;
  position: relative;
  resize: both;
  overflow: hidden;
}

video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
video:focus {
  outline: none;
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 50%;

  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
  border: 5px solid white;
}
</style>
<div style="height: 200px; width: 700px;">
  <video src="https://static.videezy.com/system/protected/files/000/019/696/pointing_blue.mp4" autoplay muted loop></video>
  <button></button>
</div>

1 commentaires

Cela ne fonctionne pas avec toutes les largeurs de conteneur.

1
votes

Mots clés:

Ajoutez des éléments ( .button-spacer ) des deux côtés de la vidéo pour revendiquer la largeur nécessaire pour un bouton.
Centrez et espacez tout uniformément en utilisant la disposition flexible .
Utilisez absolute positionnement absolute sur le bouton pour le maintenir à l'écran même s'il n'y a pas assez de place à côté de la vidéo.

<div class="player" style="height: 120px; width: 400px;">
  <div class="button-spacer"></div>
  <video src="https://static.videezy.com/system/protected/files/000/019/696/pointing_blue.mp4" autoplay muted loop></video>
  <div class="button-spacer">
    <button></button>
  </div>
</div>

.player {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;

  background-color: black;
  resize: both;
  overflow: hidden;
}

video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  align-self: center;
}
video:focus {
  outline: none;
}

.button-spacer {
  flex: 1 1 auto;
  max-width: 50px;

  position: relative;
  display: flex;
  align-items: center;
  
  background: maroon;
}

button {
  position: absolute;
  right: 0;
  width: 50px;
  height: 50px;
  
  background-color: red;
  border-radius: 50%;
  border: 5px solid white;
  cursor: pointer;
}

0 commentaires