How is it possible to make an video fullscreen responsive.
I've tried it with:
video{
width: 100%;
}
And:
video{
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
But I've got only problems with that. I can't put stuff below the video, its too big and small screens are not full with the video ...
Screenshot1
Screenshot2
You need to take margins of the body and set video to 100% width, auto height and position relative. codepen example: https://codepen.io/anon/pen/oMQveO
body {
margin: 0;
}
video {
position: relative;
width: 100%;
height: auto;
}
Related
How can i fit this video on the whole screen?
I have used the below code
<style>
*{
margin: 0px;
padding: 0px;
}
#sky-video{
position: fixed;
width: 100%;
height: 100%;
z-index: -100;
}
</style>
<body>
<video src="videos/Sky.mp4" autoplay muted loop id="sky-video">You brower does not support vidoes</video>
</body>
Here you can see there is a gap in right and left of the video.
Is this because the video size is too small to fit in the whole screen?
You may also want to add: object-fit
#sky-video {
position: fixed;
width: 100%;
height: 100%;
z-index: -100;
object-fit: cover;
}
You need to set the width and height for the video container first.
Your container now is then:
body {
display: block;
width: 100%;
height: 100vh;
position: relative;
}
body #sky-video {
width: 100%;
height: auto;
object-fit: cover;
}
Experiencing a problem where under a certain window width (around 1100px)
the background video of the title page of my site begins to cause problems. its hard to explain, but an inexplicable gap appears between the first div (titlecontainer) and the one below (aboutcontainer).
The test server address is: mintrain . co . uk
any help would be great. i've read up on simulating background-size: cover for html5 video but it doesn't solve this issue where the div height is finite. thanks, Jack
Instead of having the position be absolute make the position fixed. And that should fix your sizing issue!
#bgvideo {
position: fixed;
transform: translate(-50%,-50%);
background-color: #232528;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
top: 50%;
left: 50%;
}
#media only screen and (max-width: 1000px) {
#bgvideo {
position: absolute;
transform: translate(-50%,-50%);
background-color: #232528;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
top: 50%;
left: 50%;
} }
Here's the HTML:
<div class="container">
<div class="wrapper">
<iframe src="...."></iframe>
</div>
</div>
The wrapper div has CSS:
position: relative;
width: 100%;
height: 100%;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
The iframe has CSS:
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 0;
The container has CSS:
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
max-width: 1280px;
max-height: 720px;
I'm trying to protect the aspect ratio 16:9 of the iframe as the window resizes and also maintain a maximum height for it of 100% - 67px calc(100% - 67px). How can I do the two at the same time?
I had the same issue. Ended up making another wrapper for the wrapper to get the effect of both.
The inner wrapper ensures that the aspect ratio is retained as padding-bottoms' value is scaled from width. The iframe fills it's container, and the outer wrapper provides the max-width so that it stops expanding after 865px.
.video-wrapper-wrapper {
max-width: 865px;
margin: auto;
.video-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 82%;
iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
}
}
Instead of using padding to set the height, set the height to the viewport width:
height: 56.25vw; /* 16:9 */
You can then set a max-height to whatever you like.
The solution is to wrap the entire thing in an element with max-height: ___; overflow: hidden.
I have a cover Image in an html page that is wrapped by a div.
The div size is always width:100% height:33%.
I want any arbitrary image to scale to fill without be stretched on any screen size and ratio.
My CSS looks like this:
.headerImageWrapper{
position: relative;
width: 100%;
height: 33%;
overflow:hidden;
}
.coverImageCentered{
min-width: 100%;
min-height: 100%;
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
My problem is that the image size is not the mimimum possible that satisfy these conditions.
See the image to understand better
I'm an iOS developer, if you now how it works basically like the contentMode : scale aspect to fill
This is what you looking for.. you can test this solution on the device
http://jsbin.com/joxinizo/4
source code:
http://jsbin.com/joxinizo/4/edit
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.bgd {
position: relative;
width: 100%;
height: 33%;
overflow: hidden;
}
.bgd-cover {
position: absolute;
top: 0;
left: -50%;
width: 200%;
height: 100%;
overflow: hidden;
}
.bgd-cover-img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 13%;
}
UPD: i updated my answer
UPD2:
I don't know if I get right your question, but you may try to experiment with background-size: cover (you won't need wrapper with this one).
<div id="subpageMain">
<div id="subpageHeaderImageSection">
<div id="subpageHeaderLeft">
</div>
</div>
</div>
#subpageHeaderImageSection {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 400px;
}
#subpageHeaderLeft {
position: absolute;
left: 0;
top: 0;
float: left;
width: 100%;
height: 100%;
background: url('../theImages/subpageHeaderImage.png') no-repeat;
background-size: 100% 100%;
}
#subpageMain {
position: relative;
margin-left: 295px;
margin-right: 10px;
padding-bottom: 43px;
top: 50px;
}
This is what I see:
Why does IE8 take the background image and stretch it too much that the right content doesn't show and goes out of the screen?
How do I fix it?
IE8 does not support the CSS background-size attribute (see the compatibility table at MDN). To support IE8, you'll need to use an <img> element instead and set max-width: 100%; max-height: 100%;.
IE8 can't stretch the background out of the div. However, it looks like the div with id #subpageHeaderLeft is stretched to the right due to the fact that it has width:100%