I'm trying to display a grid of live cameras.
I need two responsive columns keeping 16:9 aspect ratio for the items.
My code is:
<div class="grid">
<div class="item" *ngFor="let i of cameras">
<iframe [src]="this.sanitizer.bypassSecurityTrustResourceUrl(i.url)"
scrolling="no"
frameBorder="0"
allow="autoplay; encrypted-media">
</iframe>
</div>
</div>
And the CSS
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
grid-template-rows: 1fr;
grid-gap: 1px;
.item {
background: grey;
display: flex;
}
.item:before {
content: "";
display: block;
height: 0;
width: 0;
padding-bottom: calc(9/16 * 50%);
}
iframe{
width:100%;
height:100%;
background:#F2F2F2;
overflow:auto !important;
-webkit-overflow-scrolling:touch !important;
}
}
The problem is how to keep the 16:9 aspect ratio.
Any idea on how to do that?
CSS-Tricks has a cool trick that has helped me with a similar issue before:
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="videoWrapper">
<iframe width="560" height="349" src="#" frameborder="0" allowfullscreen></iframe>
</div>
Source: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
Related
I was trying to make a design in which there are 2 grid items i.e. left and right. I was trying to make the design fluid so that left can take a minimum of its width or 50%
something like min of(width, 50%)
I've tried minmax but it is just the opposite as I want. Now I'm out of options
Remember: first column would be of dynamic width. Just for testing, I've taken it 200px. It should be responsive as well.
In the below snippet I would like the second column to fill the white space between first and
second
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.left {
width: 200px;
background-color: cornflowerblue;
}
.right {
background-color: cadetblue;
}
.container {
display: grid;
height: 100%;
grid-template-columns: minmax(auto, 1fr) 1fr;
}
<div class="container">
<div class="left">LEFT</div>
<div class="right"> Right </div>
</div>
im not sure, if i got your point but you could do this:
grid-template-columns: minmax(auto, auto) 1fr;
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.left {
width: 200px;
background-color: cornflowerblue;
}
.right {
background-color: cadetblue;
}
.container {
display: grid;
height: 100%;
grid-template-columns: minmax(auto, auto) 1fr;
}
<div class="container">
<div class="left">LEFT</div>
<div class="right"> Right </div>
</div>
Flex might be what you are looking for :
Use flex which is the latest trend in CSS
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.left {
width: 200px;
background-color: cornflowerblue;
}
.right {
width: 100%;
background-color: cadetblue;
}
.container {
display: flex;
height: 100%;
width: 100%;
}
<div class="container">
<div class="left">LEFT</div>
<div class="right"> Right </div>
</div>
I'm trying to do a video layout like the following:
The video embed will be with an iframe. I'd like to keep the height of lesson items on the left to be same height as the video and to have different container on the bottom that comes after the video and lesson container.
html
<div>
<div class='container'>
<div class='video-container'>
<iframe class='iframe' src="https://www.youtube.com/embed/I2UBjN5ER4s" width="640" height="360" frameBorder="0"
allow="autoplay; fullscreen" allowFullScreen title="https://player.vimeo.com/video/459785420">
</iframe>
</div>
<div class='menu-items'>
<div class='lesson'>
lesson menu
</div>
...
</div>
</div>
</div>
css:
.container {
display: flex;
height: 100px;
}
.video-container {
overflow: hidden;
padding-bottom: 56.25%;
height: 0;
position: relative;
outline: 1px solid black;
flex: 0 0 75%;
}
.iframe {
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
.menu-items {
padding: 10px;
flex: 0 0 25;
}
.lesson {
padding-bottom: 20px;
}
I've created a codepen: https://codepen.io/cagaroos/pen/XWdoROw?editors=1100
try this
.video-container {
height: auto;
}
instead of
.video-container {
padding-bottom: 56.25%;
height: 0;
}
add bottom and right
.iframe {
bottom:0;
right:0;
}
remove padding-bottom of last lesson div
.lesson:last-child {
padding-bottom:0;
}
also remove width and height <iframe> tag in html
Codepen demo
I want to wrap a laptop image around a youtube video. I allready got a solution for that. Now i want to make everything responsive for smaller devices. Any solutions for that ?
body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
#tv_container {
background: url('img/video.jpg') no-repeat top left transparent;
width: 1440px; /* Adjust TV image width */
height: 810px; /* Adjust TV image height */
position: relative;
}
#tv_container iframe {
position: absolute;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: relative;
top: 78px;
left: 252px;
width: 65%;
height: 67%;
}
<div class="container">
<div id="tv_container">
<div class="videoWrapper">
<iframe width="760" height="315" src="https://www.youtube.com/embed/qidS1nnK0Ps" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
You should change the #tv_container styles to use a variable width:
#tv_container {
background: url('img/video.jpg') no-repeat top left transparent;
width: 80%;
height: auto;
position: relative;
}
I also used an auto height for the container so it changes according to its width.
I'm new to bootstrap. I have simple page with a header (which has background image) and logo.
I have two questions
How to hide background image of the header tag and center the logo if <768px
How to resize the background image depending of the viewport size?
Here's the code I have
<div class="container">
<div class="row">
<div class="col-md-12">
<header>
<img src="images/logo.png" alt="" />
</header>
</div>
</div>
</div>
css
body header {
position: relative;
width: 940px;
height: 200px;
background: url(../images/header-bgr.png) no-repeat;
}
body header img {
position: absolute;
top: 2px;
right: 2px;
}
Use like this:
For hiding background image of the header tag and center the logo:
CSS:
#media (max-width: 767px) {
body header {
position: relative;
width: 940px;
height: 200px;
background: none;
margin:0 auto;
}
body header img {
position: absolute;
top: 2px;
right: 2px;
display: none;
}
}
try background-size:contain; for resizing your image
body header {
position: relative;
width: 940px;
height: 200px;
background: url(../images/header-bgr.png) no-repeat;
background-size:contain;
}
It is always clearer if you provide jsfiddle or codepen with your actual code.
When you already have a container class on top, you don't really have to define another header with static width. Either it can be 100% or use container class on header. Your structure can basically be reduced to this form.
HTML:
<header class="container">
<figure>
<img src="http://cdn4.colorlib.com/wp/wp-content/uploads/sites/2/2014/02/Olympic-logo.png" class="img-responsive" alt="logo">
</figure>
</header>
CSS:
* {
box-sizing: border-box;
}
header {
width: 100%;
background: url('http://www.psdgraphics.com/file/colorful-triangles-background.jpg') no-repeat;
background-size: cover;
background-position: center center;
height: 200px;
border-bottom: 1px solid #999;
position: relative;
padding: 30px 0;
figure {
max-width: 200px;
margin: 0px auto;
position: relative;
}
#media (max-width: 768px) {
& {
background: none;
min-height: auto;
figure {
img {
margin-top: 00%;
}
}
}
}
}
http://codepen.io/gorkhali/pen/azjVev
I have two images of different width and height that need to be positioned bottom centered within the image box. Here is the HTML and CSS example.
<div class="box">
<div class='image'>
<img alt="" src="image.jpg"/>
</div>
</div>
.box {
max-width: 970px;
height: 440px;
}
.box img {
max-width: 100%;
position: absolute;
bottom: 8px;
margin-left: auto;
margin-right: auto;
}
This code works fine for a large image of exact width and height. But when a smaller image is placed within image box, that image is centered bottom right. How can I make both images center bottom?
Thanks for anyone's help!
Here you go... I'll try to explain as we go, but short answer, a fiddle
.box {
/* Just so I could see the parent */
background-color: #bada55;
max-width: 970px;
height: 440px;
/* Needed to make this element positional (so it will contain the absolutely positioned child */
position: relative;
/* Yep, center wasn't necessary here... */
}
.box .image { /* move this to the image wrapper */
position: absolute;
bottom: 8px;
/* Force full width */
left: 0;
right: 0;
/* Center contents (the image) */
text-align: center;
}
img {
max-width: 100%;
}
I found this semantic trick to work pretty well (without any absolute positions)
.box {
margin: 0;
text-align: center;
max-width: 970px;
height: 440px;
border:2px solid red;
}
.box .something-semantic {
display: table;
width: 100%;
height: 100%;
}
.box .something-else-semantic {
display: table-cell;
text-align: center;
vertical-align: bottom;
}
html
<div class="box">
<div class="something-semantic">
<div class="something-else-semantic">
<img src="" width="50" height="40"/>
<img src="" width="120" height="70"/>
</div>
</div>
</div>
fiddle here.