flexbox内的HTML CSS视频 [英] HTML CSS video inside flexbox
本文介绍了flexbox内的HTML CSS视频的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<!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>
如上所述，我在 flexbox 内使用了 video ，并且该代码除以下两点外均正常运行: 1)安装下面的控制线.我如何使它适合?我认为这与对齐方式有关. 2)我希望仅将 video 的大小调整为水平.为此，我搜索并使用了 width:100％，它可以正常工作，但是当我调整其大小时，右侧部分似乎忽略了我给它的 margin :
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:
推荐答案
justify-content: center;
align-items: center;
将上述样式添加到CSS中.试试下面的代码段
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>这篇关于flexbox内的HTML CSS视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
