beaubeau Ответов: 2

Положение mp4 видео в модальном окне

Как я могу расположить видео mp4 внутри модального окна так, чтобы текст в модальном окне появлялся как над, так и под видео?

ТЕКСТ ЗДЕСЬ БЛА БЛА БЛА БЛА

mp4 видео здесь

БОЛЬШЕ ТЕКСТА ЗДЕСЬ БЛА БЛА

Что я уже пробовал:

<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>

beaubeau

Почему мои HTML-строки "Что я пробовал" сократились с пяти до трех? Мое полное "что я пробовал" не показывает.

Richard Deeming

Вам нужно убедиться, что ваш кодовый блок правильно закодирован в HTML. Если редактор не сделает это за вас, то вам придется делать это вручную.

* < ⇒ &lt;
* > ⇒ &gt;
* & ⇒ &amp;

Richard Deeming

Я обновил форматирование кода для вас. Возможно, вы захотите проверить, что ничего не потеряно - некоторые HTML-теги показались мне неполными.

2 Ответов

Рейтинг:
20

CanniDanny

Привет,

Вы пробовали перемещать все элементы влево с помощью CSS?

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

video {
     float: left;
     margin: auto;
}


Для видео нет заданной ширины, поэтому я использовал 100% в качестве примера. Я бы всегда использовал некоторые отступы, чтобы обрамить контент в модальном режиме, он просто выглядит лучше. Я также заметил, что у вас есть фиксированная ширина 1050, это не будет реагировать на меньшие и большие экраны.

Надеюсь, это поможет!

Рейтинг:
1

beaubeau

Спасибо Канниданни!
текст {
поплавок: левый;
ширина: 100%;
}

видео {
поплавок: левый;
маржа-авто;
}