HTML CSS video inside flexbox

问题

<!DOCTYPE html> 
<html>
<style>
.d1 {
    background: blue;
    padding: 10px;
    display: flex;
}
video {
    margin: 10px;
    width: 100%;
    max-width: 500px;
}
</style>
<body> 

<div class="d1">
  <video controls>
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
</div>

</body> 
</html>

I use a video inside a flexbox like the above and the code works fine except two points: 1) The video size does not fit the control line that is below. How can I make it fit? I think it has something to do with the alignment... 2) I want the video to be resized horizontally only. For that, I searched and use width: 100% and it works but as I resize it the right part seems to ignore the margin that I give it:

回答1:

 justify-content: center;
    align-items: center;

Add the above styling to the css. Try the snippet below

<!DOCTYPE html>
<html>
<style>
  .d1 {
    background: blue;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  video {
    margin: 1rem;
    width: 100%;
  }
</style>

<body>

  <div class="d1">
    <video controls>
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
  </div>

</body>

</html>

来源：https://stackoverflow.com/questions/48599918/html-css-video-inside-flexbox

标签

html

css

video

flexbox