Position of mp4 video in modal window

Question

0.00/5 (No votes)

See more:

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:

HTML

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

Posted 7-Oct-16 2:25am

beaubeau

Updated 18-Oct-16 4:37am

Richard Deeming

v6

Add a Solution

Comments

beaubeau 7-Oct-16 8:29am

Why is my "What I have tried" HTML lines been reduced from five lines to only three? My full "What I have tried" is not showing.

Richard Deeming 7-Oct-16 15:44pm

You need to make sure your code block is properly HTML-encoded. If the editor doesn't do it for you, then you'll have to do it by hand.

* < ⇒ <
* > ⇒ >
* & ⇒ &

Richard Deeming 7-Oct-16 16:40pm

I've updated your code formatting for you. You might want to check that nothing was lost - some of the HTML tags looked incomplete to me.

2 solutions

Solution 2

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

video {
float: left;
margin-auto;
}

Posted 18-Oct-16 4:37am

beaubeau

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CanniDanny · Accepted Answer · 2016-10-18T03:13:00

Hi,

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

CSS

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

video {
     float: left;
     margin: auto;
}

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!