Reputation: 3039
I wrote a short code for video in html
as follows:
code:
#footer {
background: #166bb3;
height: 350px;
}
.imgdiv {
width: 100%;
background-color: #E9E9E9;
box-shadow: 0px 9px 5px -3px #000;
}
#footerItems {
min-width: 1024px;
width: 90%;
padding-left: 10%;
}
#footerItems div {
display: inline-block;
color: #FFF;
padding-top: 2%;
font-weight: bold;
font-size: 16px;
}
.accountPos {
padding-left: 8%;
}
#footerItems div ul {
padding-left: 0;
}
#footerItems div ul li {
list-style-type: none;
font-weight: 400;
font-size: 13px;
font-style: italic;
}
#videoptions {
height: 74px;
width: 23px;
background-color: #27374d;
}
<div id="footer">
<div class="col-lg-12 imgdiv">
<img src="images/Bistip-in-media.png" style="padding-left: 17%;">
</div>
<div id="footerItems" class="col-md-12">
<div>About Us
<ul>
<li>About us</li>
<li>Media reviews</li>
<li>Bistip guide</li>
</ul>
</div>
<div class="accountPos">Account Information
<ul>
<li>About us</li>
<li>Media reviews</li>
<li>Bistip guide</li>
</ul>
</div>
<div class="accountPos">Market
<ul>
<li>About us</li>
<li>Media reviews</li>
<li>Bistip guide</li>
</ul>
</div>
<div class="accountPos">Bistip
<ul>
<li>About us</li>
<li>Media reviews</li>
<li>Bistip guide</li>
</ul>
</div>
<div class="accountPos" style="width: 37%; min-width: 120px">
<div id="videoptions"> <span>Media</span>
<video width="143" height="74" controls>
<source src="https://www.youtube.com/watch?v=_gTEpakcmDw" type="video/mp4">Your browser does not support the video tag.</video>
</div>
</div>
</div>
</div>
Complete code is given here. For best results, view the result in full screen. About Us
, Account information
, Market
and Bistip
are perfect. However media
has been messed up. I want media
similar to the screen shot shown below:
How can I do it?
Upvotes: 0
Views: 32
Reputation: 22158
Maybe like this:
#videoptions > span {
display:inline-block;
vertical-align: top;
}
#videoptions > video{
display:inline-block;
vertical-align: top;
}
Upvotes: 1