I have video in my header and I want its height to be 80vh and width of 80% of a total page. Now, the problem is that when if I change the width the height also changes and if I change the height the width also changes.
Below is the image of what I am getting now.
Here is a block that I created, this is how I want my video
Here is my Code :
HTML :
<div id="main-container">
<header>
<video autoplay muted loop id="main-video">
<source src="img/header-video.mp4">
</video>
</header>
CSS :
#main-container {
width: 90%;
margin: 0 auto;
}
#main-video {
width: 100%;
height: 100%;
}
From this code, I am getting this result
This is not duplicate copy and the reason is that my problem is with video, normal div elements work totally fine but with video, it doesn't work. It expands on its width automatically when I expand height and vice versa.
I find a solution to the problem. The only thing I have to do is to add object-fit: fill in case . This will stretch the video as we want.
#main-container {
width: 90%;
margin: 0 auto;
}
#main-video {
object-fit: fill;
width: 80vw;
height: 50vh;
}
How it looks now
just try this css -
#main-container {
width: 80%;
margin: 0 auto; height:80vh;}
#main-video{
object-fit:cover;
width: 100%;
height: 100%;
}
this will not stretch your video and will cover the container.
Related
I try to stream my webcam, i want to get it in full width inside the div.
Somehow it's not working for me. I try to use % to make it responsive possible.
Here is a Fiddle
HTML
<div id="webcam">
<div class="webcam-stream">
<video src="blob:http://localhost/e814ab72-c414-4d97-9eca-b205c914fd6b" controls="" id="ME55u8ZS83mhoMloE2AE5OU9LrkDZdasaEfsKMO"></video>
</div>
</div>
<h3>
END RESULT
</h3>
<img src="https://cdn.pbrd.co/images/HPj7kAyuy.png">
CSS
#webcam {
height: 35%;
width: 40%;
}
.webcam-stream {
width: 100%;
height: 90%;
}
video {
height: 100%;
width: 100%;
}
in any case for responsive it should have bakground, for all screens all devices, or you will have distortion of video in full size mode.
or please read articles, and try to make
https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
there is few way
1) make fixed container for wrapper, with top,left,bottom,right set to zero, and than for it child add absolute.
2) try with 100vw and 100vh, this can not work in some IE, and older browsers
I am not sure I understand your question 100% but to make it easier for you to see which styles need to change add different background colors to your views.
#webcam {
height: 35%;
width: 40%;
background-color: red;
}
.webcam-stream {
width: 100%;
height: 100%;
background-color: blue;
}
video {
height: 100%;
width: 100%;
background-color: green;
}
In this following example a changed the % values of the child elements to be 10% less to show you what I mean.
I'm building a website that has an autoplaying video as the hero element, and I currently have the video set to the following css:
#video-background {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto !important;
height: auto !important;
z-index: -100;
}
The purpose of which is to allow it to be full width. The fixed position is needed because the content below the video needs to be able to scroll over the video.
Unfortunately, even with the negative z-index, the video prevents you from clicking on content further down the page. It's still overlaying everything. When I right click anywhere the play, pause, unmute, etc. controls come up.
Not really sure how to keep this from happening. I've tried to play around with some of the settings, but anything (that I've tried, at least) that makes it full width ends up causing it to overlay everything.
Here's the html:
<video autoplay="" loop="" id="video-background" muted="" style="width: 100%; height: 100%;">
<source src="http://beta.mattgrossdesign.com/sites/default/files/wood%20autumn-HD.mp4" type="video/mp4">
</video>
EDIT: Solved it with a little help from a coworker. Here's the CSS:
div#layer_slider_1 {
height: auto;
position: fixed;
top: 0;
width: 100%;
z-index: 0;
}
div#after_layer_slider_1 {
margin-top: 800px;
}
div#layer_slider_1 is the parent div. The div#after_layer_slider_1 is obviously the div right after it.
Thanks for the input.
Add this CSS property
html, body {
width:100%;
height:100%;
}
Solved it with a little help from a coworker. Here's the CSS:
div#layer_slider_1 {
height: auto;
position: fixed;
top: 0;
width: 100%;
z-index: 0;
}
div#after_layer_slider_1 {
margin-top: 800px;
}
div#layer_slider_1 is the parent div. The div#after_layer_slider_1 is obviously the div right after it. Needed to make the div below it overlay the video in order to avoid it from covering the whole page, even with the z-index.
Thanks for the input.
As the title states, if I wrap <video>'s in a <div> container (to further add an overlay), which is set to relative; inline-block; height:100%; while <video>'s size is height:100%; width:auto It's all nice on initial page rendering, but as soon as you resize the page the videos shrink/grow, but the container's width remains the same.
Here is a codepen for you: http://codepen.io/MaxYari/pen/PqeOQY
Just try to change height of the window and see what I mean.
In another words - I want to make a container that will wrap around the <video> tag, which preserves its aspect ratio by its nature.
This div-video construct must fit into a bigger container-list.
Fit by the bigger side, depending on container-list orientation. i.e height: 100% for horizontal.
Separate CSS surely can be made for different orientations, therefore I just want to solve one case, presuming that it will solve both.
Edit: Updated Pen and added a border to video wrapper to illustrate it's nonwrappiness better.
In Firefox it looks like you could just change display: inline-block; to display: inline-flex; like so:
Example - Does NOT work in Google Chrome; For multibrowser solution with some JavaScript look down below
body,
html {
height: 100%;
}
#videos {
position: relative;
height: 30%;
background-color: rgba(0, 0, 0, 0.8);
}
.video_wrapper {
height: 100%;
display: inline-flex; /* see change here */
}
.video {
height: 100%;
width: auto;
}
<div id="videos">
<div class="video_wrapper">
<video class="video" autoplay src="http://techslides.com/demos/sample-videos/small.mp4"></video>
</div>
<div class="video_wrapper">
<video class="video" autoplay src="http://techslides.com/demos/sample-videos/small.mp4"></video>
</div>
</div>
MDN Documentation
Can I use compatibility table
It looks like the only way to get it to work in Chrome is to force a repaint when the window is resized:
Working Example
$(window).resize(function () {
$('.video_wrapper').hide().show(0);
});
Chrome seems to have issues with fluid video, looks like it has something to do with the object-fit property, fortunately you can work around it with the method above.
You have not specified any width in the video wrapper
.video_wrapper {
height: 100%;
display: inline-block;
}
Add a percentage width like this:
.video_wrapper {
width: 100%;
height: 100%;
display: inline-block;
}
Actually just setting the .video wrapper isn't going to keep in it's container.
you're going to have to set a min-width for the body, html selectors. Use a fluid body width is what's causing to escape it's container.
so the new css would look like
body,html {
height: 100%;
min-width: 1024px;
}
#videos {
position: relative;
height: 30%;
background-color: rgba(0,0,0,0.8);
}
.video_wrapper {
height: 100%;
display: inline-block;
}
.video {
height: 100%;
width: auto;
}
I have a slight issue. I have a video which I would like to adjust to the browser, it shouldn't stretch, but neither should there be any with space visible
HTML:
<video src="Wereldbol.mp4" onclick="this.play();" id='wereldbol' preload="auto" ></video>
CSS:
#wereldbol {
position: absolute;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
background-size:cover;
}
background-size: cover; is causing the issue that the video would be off-center, is there any alternative way to cover the browser's full width and height? At the moment width: 100% and height: 100% don't quite fix the issue because it would leave the image to have a white bar on the left and right, eventhough the video scales correctly. Is there any way to fix this issue?
If I understand you correctly, what you are trying to achieve is keep the video’s aspect ratio, but make it adapt to its surroundings without stretching the video out of proportion. Here’s how I do it:
Wrap the video element in a div, like this:
<div class="video-wrapper">
<video src="Wereldbol.mp4" onclick="this.play();" id='wereldbol' preload="auto" ></video>
</div>
Then use the following CSS:
.video-wrapper {
position: relative;
width: 100%;
max-width: 100%;
height: 0;
padding: 56.25% 0 0 0; /* 100%/16*9 = 56.25% = Aspect ratio 16:9 */
overflow: hidden;
border: 0;
}
.video-wrapper video {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
EDIT: Here’s a plunker: Adjust the viewport-width to see how it works.
You need to either adjust the CSS to fit the exact aspect-ratio using the "aspect ratio trick" or use something like FitVids.js -- see http://fitvidsjs.com/
For some reason whenever shorten the height of the browser, elements start to overlap.
I tried pulling it up in Firebug and troubleshoot it..but no luck. Hopfully one of you can help me!
EDIT:
Note Ever since I added the video its been doing this
HTML
<section id="video">
<video width="745px" height="414px" controls="controls" poster="video/video-poster.png">
<source src="video/intro-video.mp4">
<source src="video/intro-video.ogv">
<source src="video/intro-video.webm">
<iframe width="745" height="414" src="//www.youtube.com/embed/Dhqnn3bA7LU" frameborder="0" allowfullscreen></iframe>
</video>
</section>
CSS
#video {
position: relative;
margin: 0 auto;
margin-bottom: 15px;
text-align: center;
max-width: 745px;
width: 100% !important;
height: auto !important;
}
video {
max-width: 745px;
width: 100% !important;
height: auto !important;
}
Link: http://kmgp.us/clients/stackoverflow/
Huge thanks in advance!
Here is what it looks like normally
And here is what it looks like when you shorten the browser height
Basically, it sounds like you want your footer to be 'sticky', i.e. always on the bottom of the page. This css-tricks article outlines what you should do, but you should firstly move your <footer> outside of your <div id='#container'> and then apply the following CSS:
#container {
min-height: 100%;
/* equal to footer height */
margin-bottom: -32px;
}
#container:after {
content: "";
display: block;
}
footer, #container:after {
/* .push must be the same height as footer */
height: 32px;
}
Also, as you pointed out, your background is also distorted. That's because you're applying your box-shadow to the body element. Try instead attaching it to your #container