How do I align images along side and parallel to video height - CSS

Question

0.00/5 (No votes)

See more:

When I play video it may be landscape or portrait in orientation. I have 2 images imgfeatured1 and imgfeatured2 which appear left and right of the video respectively. I wish these images to adjust automatically to be the same height as the video being played.

<div id="streaming">
    <video playsinline ID="videoToPlay" poster="https://www.example.co.uk/files/images/videoPoster.jpg" runat="server"  autoplay preload class="videosize" controls>
        <source src="vid1.webm" type='video/webm;codecs="vp8, opus"'/> 
        <source src="vid2.mp4" type='video/mp4;codecs="avc1.4D401E, mp4a.40.2"'/>
	<source src="video/video.mov" type="video/mov"></source>
    </video>

    <asp:Image ID="imgFeatured1" alt="Featured 1" imageUrl="https://www.example.co.uk/files/images/icons/featured1.png" class="videologo" runat="server" />

    <asp:Image ID="imgFeatured2" alt="Featured 2" imageUrl="https://www.example.co.uk/files/images/icons/featured2.png" class="videologoright" runat="server" />


</div>

What I have tried:

I have got as far as this with the css..

.videologo {
  position: absolute;
  left: 5px;
}

.videologoright {
  position: absolute;
  right: 5px;
}

This places the images to the left and the right of the video, but I don't know how to adjust the height of the images.

Posted 9-Apr-20 14:20pm

Member 13779417

Updated 14-Apr-20 9:01am

Add a Solution

1 solution

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)

Richard Deeming · Answer 1 · 2020-04-14T09:02:00

Depends what you want to happen to the width of the images when you change their height.

If you just want them to stay the same width and stretch the height, it's as simple as:

CSS

#streaming {
    display: flex;
}
.videologo {
    order: -1; /* Only required if the image appears after the video in the markup */
}

If you want them vertically centred with the video, just add align-items:center; to the #streaming rule.

Making the images resize proportionally is slightly trickier. Something like this might work:

ASP.NET

<div id="streaming">
    <video ...>
        ...
    </video>
    
    <div class="logo-left">
        <asp:Image ... />
    </div>
    
    <div class="logo-right">
        <asp:Image ... />
    </div>
</div>

CSS

#streaming {
    display: flex;
}
.logo-left {
    order: -1; /* Only required if the image appears after the video in the markup */
}

.logo-left,
.logo-right {
    flex: 1 0 auto;
}
.logo-left img,
.logo-right img {
    display: block;
    height: 100%;
    margin: 0;
}
.logo-left img {
    margin-left: auto;
}
.logo-right img {
    margin-right: auto;
}

CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN[^]