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屋!
查看全文