I have a certain problem that I came across I need to make a video element with fixed height as well I have a canvas element that is positioned on top of the video element which represents a rectangle that is drawn across the object.
When I use object-fit with max-height: 60vh, the canvas element as well gets shrunk to 60vh but instead, it should be 100% height
.display-cover {
position: relative;
}
#video {
min-width: 100%;
object-fit: cover;
max-height: 60vh;
}
#camera-feedback {
position: absolute;
top: -30px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
<div class="display-cover">
<canvas id="camera-feedback"></canvas>
<div class="video-cover">
<video id="video" autoplay playsinline>
Your browser does not support the video tag.
</video>
</div>
</div>
Image example ( yellow rectangle should cover all document), when height of the video is 100% it works fine
Related
I want to put two images together like
enter image description here
with responsive.
I used relative position for this, but whenever screen become smaller, it goes like this
enter image description here
I want to use two different images because I'm gonna animate these seperately.
.img_box{
width: 100%
}
.desk {
position: relative;
width: 90%;
bottom:-30%;
}
.person {
position: relative;
width: 90%;
bottom:20%;
right: 25%;
}
<div class="img_box">
<img class="desk" src="https://material.angular.io/assets/img/examples/shiba1.jpg">
<img class="person" src="https://material.angular.io/assets/img/examples/shiba2.jpg">
</div>
I tried to use absolute, but it doesn't work well for responsive I think
I would suggest creating a new stacking context by adding position: relative; to your .img_box wrapper element, then absolutely position any images ("layers") that you use inside of that new stacking context.
For example:
.img_box {
/* Setting to position: relative creates a new stacking context */
position: relative;
width: 100%;
max-width: 400px;
}
.img_layer {
/* Positions absolutely each payer inside the .img_box stacking context */
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.person {}
.desk {}
<div class="img_box">
<img class="img_layer desk" src="https://assets.codepen.io/817230/back.gif">
<img class="img_layer person" src="https://assets.codepen.io/817230/front.gif">
</div>
This way, adding position: absolute; to any layers will set their position relative to their parent (and not the document). You will be able to position/scale your wrapper element however you'd like and all children will follow suit accordingly.
You can still use .person and .desk for additional styling on the respective layers and/or setting z-index, etc., which is why I left them.
If I understood it correctly, you want to align the images to the center, both vertically and horizontally. You also want to move them together, I mean, without creating some offset between them when you resize the window. So, I would do something like this:
body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.container {
position: relative;
height: 100vh;
width: 100vw;
}
.desk {
width: 30%;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.person {
width: 30%;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
for an HTML like this:
<body>
<div class="container">
<img class="desk" src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="" />
<img class="person" src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="" />
</div>
</body>
Take a look at
CSS Layout - Horizontal & Vertical Align to learn more about the CSS alignment, and
Layout and the containing block to learn how percentage values are calculated for positioned elements.
<div class="mission-statement">
<video style="min-height:100%" playsinline autoplay muted loop poster="{{ url_for('static',filename='images/cclc-background-image.png') }}" id="bgvid">
<source src="{{ url_for('static',filename='videos/cclc-clip2.mov') }}" type="video/webm">
</video>
</div>
#mission-statement {
margin-top: 0px;
margin-bottom: auto;
height: 100vh;
width: 100vw;
}
video#bgvid
{width: 100%; height: 100%; position: relative;}
Currently I have a video in the background of this div. However currently, when the screen is really wide, there is space on the left and right and when it is really narrow, there is space on the top and bottom.
Instead, I would like the video to zoom such that it is always touching all 4 sides. If the browser is narrow, it will be zoomed such that the left and right parts of the video are cut off. If the browser is really wide, it will be zoomed such that the top and bottom are cut off.
How can I accomplish this?
If you are only concerned with real modern browsers that conform to W3C standards (i.e. Not IE), use object-fit:cover. If IE is a must, there's a polyfill, but other than that, it would take too much effort and time to force a "browser" like IE to conform when it's obvious design is to conflict with everything that's sane and logical.
View in Full page mode
Demo
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
}
#mission-statement {
overflow: hidden;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
video#bgvid {
height: 100vh;
width: 100vw;
object-fit: cover;
overflow: hidden;
position: absolute;
bottom: 0;
right: 0;
}
<div class="mission-statement">
<video style="min-height:100%" playsinline autoplay muted loop poster="https://i.pinimg.com/originals/28/6c/00/286c004a0cc4a49a5e6985b0e0812923.gif" id="bgvid">
<source src="http://media6000.dropshots.com/photos/1381926/20170326/005609.mp4" type="video/mp4">
</video>
</div>
Try this:
video#bgvid {
/* Make video to at least 100% wide and tall */
min-width: 100%;
min-height: 100%;
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
width: auto;
height: auto;
/* Center the video */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
I want to make an html5 video fit any size of the screen, if it's a iMac huge screen or if it's a phone, I want it to be responsive.
1) If it's a 4:3 monitor, it should show blank spaces (black bars) above and below video
2) If it's a super wide screen it should fit the height but show blank spaces left and right
3) Same with mobile, if it's portrait or landscape position
This is my HTML
<div class="video-container"> <!-- background darkener -->
<video controls>
<source src="img/vid.mp4" type="video/mp4">
</video>
</div>
CSS:
.video-container {
position: fixed;
top: 0; left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
}
.video-container video {
/* Here is what I want to know how to make it fit the way we want */
}
I don't mind using jQuery if more real time calculations are needed!
Thanks beforehand
Try this, works for me
.video-container video {
position: absolute;
top:0;
right:0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-size: 100% 100%;
background-image: url('your-video-poster.jpg');
background-position: center center;
background-size: contain;
object-fit: cover;
z-index: 100;
}
I am looking to make my video background like this:
http://www.teektak.com/
The issue I'm having is that my video is responsive, but it is fixed to the left. I can't figure out for the life of me how to make it so that it centers horizontally to the window when adjusted.
Here is a link to the test site to see what I am talking about: https://robotplaytime.paperplane.io/
HTML
<body>
<video poster="images/robotPlaytimeVideo.png" id="bgvid" autoplay loop muted>
<source src="images/robotPlaytimeVideo.mp4" type="video/mp4">
</video>
</body>
CSS
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
}
video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
min-width: 100%;
min-height: 100%;
z-index: -100;
background: url(../images/robotPlaytimeVideo.png) no-repeat;
background-size: cover;
}
Add these CSS rules to your body (the video's parent container):
text-align: center; /* ensures the image is always in the h-middle */
overflow: hidden; /* hide the cropped portion */
Add these CSS rules to your video:
display: inline-block;
position: relative; /* allows repositioning */
left: 100%; /* move the whole width of the image to the right */
margin-left: -200%; /* magic! */
Most of this was pulled directly from Bryce Hanscomb's answer to another similar question: How to center crop an image (<img>) in fluid width container
Here's a jsfiddle just in case:
http://jsfiddle.net/pLj0gcpu/
(Note that the markup and styles in this fiddle were pulled from your given URL)
To get the video to take the full size of the screen:
video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
}
If you wanna center something horizontally responsively, then do
left: 50%;
transform: translateX(-50%);
Note, you will need to set a "position" as well
I am creating an image viewer with a canvas which will pop open in a new window. I would like the canvas to be the width of the window and 100px from the top and bottom. I would also like for it to resize without using javascript (let me handle the redrawing in javascript - I just want to see the canvas stay fixed to the edges of the window with the top and bottom spacing.) How can I do this? I tried the following but the right and bottom are ignored:
.contextCanvas
{
position: fixed;
left: 0px;
right: 0px;
top: 100px;
bottom: 100px;
}
Any suggestions or reasoning as to why the browser will happily ignore the right and bottom?
I found the answer - I had to wrap the canvas in a container div which was fixed positioned and then set the inner canvas to absolute positioning and 100% width & height.
HTML
<div class="canvasContainer">
<canvas class="contextCanvas"></canvas>
</div>
And here's the CSS
.canvasContainer
{
position: fixed;
left: 0px;
right: 0px;
top: 100px;
bottom: 100px;
z-index: 1;
background-color: Black;
}
.contextCanvas
{ position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 1;
}