mp4视频在模态窗口中的位置 [英] Position of mp4 video in modal window

问题描述

如何在模态窗口中放置mp4视频，以便模式窗口中的文字出现在视频的上方和下方？



文字在这里BLAH BLAH BLAH BLAH



mp4 video here



更多文字在这里BLAH BLAH



我尝试了什么：

How can I position an mp4 video inside a modal window so that text in the modal window appears both above and below the video?

TEXT HERE BLAH BLAH BLAH BLAH

mp4 video here

MORE TEXT HERE BLAH BLAH

What I have tried:

<div id="modalwindow" style="display:none;">
    <center>
        <img src="modal-window.png" height="600" width="1050">
        <text color=black>
        <video controls autoplay>
            <source src="video.mp4" type="video/mp4">
        </video>
    </center>
</div>

推荐答案

您是否尝试使用CSS将所有元素浮动到左侧？

Hi,

Have you tried floating all elements to the left using CSS?

text {
    float: left;
    width: 100%;
}

video {
     float: left;
     margin: auto;
}

视频没有设置宽度，所以我使用100％作为例子。我总是使用一些填充来构建模态中的内容，它看起来更好。我也注意到你的固定宽度为1050，这对较小和较大的屏幕没有响应。



希望这有帮助！

There is no set width for the video so I have used 100% as an example. I would always use some padding to frame the content in the modal, it just looks nicer. I have also noticed that you have a fixed width of 1050, this will not be responsive on smaller and larger screens.

Hope this helps!

谢谢CanniDanny！

text {

float：left;

宽度：100％;

}



视频{

浮动：左;

margin-auto;

}

Thanks CanniDanny!
text {
float: left;
width: 100%;
}

video {
float: left;
margin-auto;
}

这篇关于mp4视频在模态窗口中的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！