I am trying to add a fullscreen video to a website but I am having trouble getting it to cover the entire screen.
Originally, I tried using the video tag but this wouldn't work properly on android. Now I am trying iframes and the CSS I am using is:
iframe {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(polina.jpg) no-repeat;
background-size: cover;
}
No matter what, there is always additional backspace above / below the video.
Is there anyway I can make the video fill the entire screen, happy to loose some off the sides.
Testing url is here.
Add width: 1920px; and height: 816px; to your code and it works!
iframe {
position: fixed;
top: 50%;
left: 50%;
width: 1920px;
height: 816px;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
Alternatively this could be a starting point for a solution without iframe.
html,
body {
margin: 0;
padding: 0;
}
video {
object-fit: cover;
width:100%;
min-height:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<video width="1920" height="816" preload="auto" autoplay loop>
<source src="http://dev.charlyanderson.co.uk/OnePointEight/wp-content/uploads/2016/03/BLKLOGO.m4v" type="video/mp4">
</video>
</body>
</html>
I actually found this link and the code it provides does the trick! http://fvsch.com/code/video-background/
#video-bg {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
overflow: hidden;
}
#video-bg > video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 1. No object-fit support: */
#media (min-aspect-ratio: 16/9) {
#video-bg > video { height: 300%; top: -100%; }
}
#media (max-aspect-ratio: 16/9) {
#video-bg > video { width: 300%; left: -100%; }
}
/* 2. If supporting object-fit, overriding (1): */
#supports (object-fit: cover) {
#video-bg > video {
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
}
}
Related
I'm using the html5 video to display a background video for a site I'm building. I want it to fill the whole screen and be responsive, but there seems to be a gap in the bottom.
.video {
position:absolute;
height:100% !important;
width:100%;
top:0;
right: 0;
left:0;
bottom:0;
}
video{
position:absolute;
width:100% !important;
max-height: 100% !important;
background-size: cover;
}
<div class="video" >
<video autoplay loop poster="../img/grazing.jpg" class="fillWidth">
<source src="../videos/CowType.webm"
type='video/webm;codecs="vp8, vorbis"'/>
<source src="../videos/CowType.mp4"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
</div>
And here is a link to the site:http://capelos.gonzbergagency.com/prime.html
Try this CSS for the video
video{
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
background-size: cover;
}
be sure to delete this from the existing video CSS
video{
width: 100% !important;
max-height: 100% !important;
}
This is what you need:
html,
body,
div,
video {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.video {
position: fixed;
top: 50%;
left: 50%;
z-index: 1;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
I am trying to keep a background video centered regardless of how big the user drags the video. It's currently cutting off the right side of the videos when i scroll smaller. Here's what I have:
<section id="home">
<div class="video_shader"></div>
<div class="video_contain">
<video autoplay="" loop="" poster="img/still.jpg" id="bgvid">
<source src="/realWebm.webm" type="video/webm" />
<source src="/realdeal.mp4" type="video/mp4">
<source src="/reaOg.ogv" type="video/ogg" />
</video>
</div>
</section>
.video_contain{
display: block;
position: absolute;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
video {
min-width: 100%;
min-height: 100%;
z-index: -100;
background-position: center;
background-size: cover;
}
#home {
width: 100vw;
height: 100vh;
display:block;
position: relative;
}
I would like the center of the video to be the center of the page always, even if the sides get cut off - that's actually ideal if it happens that way. Would appreciate any help. Thanks for reading!
here's how I typically do background video, and how I did it for the stre.am landing page:
.video_contain {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
video {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
min-height: 50%;
min-width: 50%;
}
This is much shorter and worked for me.
video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
transform: translateX(calc((100% - 100vw) / 2));
}
In my use case where I always wanted the video to cover the entire viewport (no matter if the viewport aspect ratio was bigger or lower than the videos), the above solution didn't work exactly how i intended. Instead, the following worked much better:
.video-container {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.video-container > video {
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
#media screen and (max-aspect-ratio: 1920/1080) {
.video-container > video {
height: 100%;
}
}
#media screen and (min-aspect-ratio: 1920/1080) {
.video-container > video {
width: 100%;
}
}
My video was 1920x1080, and this works in IE11 (didnt test lower) and beyond.
.bg-video-wrap {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.bg-video-wrap > video,
.bg-video-wrap > iframe {
object-fit: cover;
object-position: center center;
width: 100%;
height: 100%;
}
Late to the party but I wanted to give a 2020 answer. Here's a simple solution that lets you have an HTML video both centered and responsive without being "fixed" positioned. It lets you start with a fullscreen intro and add some text right when you start scrolling. No scrollbars, no annoying things. As simple as that.
https://codepen.io/LuBre/pen/GRJVMqE?editors=1100
CSS
* {
box-sizing: border-box;
}
body, html {
margin: 0;
height: 100%;
font-Family: Arial;
}
.video-container {
display: grid;
justify-items: center;
align-items: center;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.video-container video {
position: absolute;
z-index: 1;
top: 50%;
left:50%;
min-width: 100%;
min-height: 100%;
transform: translateX(-50%) translateY(-50%);
}
.video-text {
z-index: 2;
color: #fff;
text-align: center;
}
.video-container h1, .video-container h2 {
margin: 0;
font-size: 3rem;
}
.video-container h2 {
font-size: 1.4rem;
font-weight: normal;
opacity: 0.6;
}
.page-content {
line-height: 1.4rem;
padding: 2rem;
}
HTML
<div class="video-container">
<video autoplay muted loop>
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>
<div class="video-text">
<h1>Catchy title</h1>
<h2>Everyone loves catchy titles</h2>
</div>
</div>
<div class="page-content">
<h1>New paragaph</h1>
Some random text goes here...
Use object-fit: cover;
video {
position: absolute;
right: 0;
bottom: 0;
height: 100vh;
width: 100vw;
object-fit: cover;
}
just center it like any other element with position absolute
.video_contain {
position: absolute;
width: auto;
min-height: 100%;
min-width: 100%;
left: 50%;
transform: translate(-50%);
}
This worked for me
.video_contain {
position: absolute;
z-index: -1;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image: none;
}
#bgvid {
margin: auto;
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
visibility: visible;
width: 1267px;
height: auto;
}
This did the trick for me, keeping the video centered all the time and not worrying about the actual dimensions of the video
.video_contain {
position: absolute;
top: 0;
left: 0;
/** could be any size **/
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
video {
display: block;
min-height: 100%;
min-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
So I tested above solutions and couldn't find that one, so here is mine:
video {
position: fixed;
left: 50%;
top: 50%;
min-width: 100%;
min-height: 100%;
transform: translate(50%, -50%);
}
I have an issue when im trying to make a picture resizable, i explain:
I have a div "overlay" that will fit the window;
Inside this div i have another div "imgActive" that will contain some pictures centered on the window;
Theses pictures inside has to fit the window no matter their size.
But, as you can see on this fiddle the picture inside fit horizontaly (the width change) but when you resize the window vertically, that doesn't resize at all (the height is still the same).
.overlay {
background: rgba(0, 0, 0, 0.7);
height:100%;
position: fixed;
width: 100%;
top: 0;
z-index: 999;
}
.imgActive {
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
max-height: 100%;
max-width: 100%;
position: absolute;
top: 50%;
z-index: 1000;
}
.imgActive img {
max-height: 100%;
max-width: 100%;
}
What can i do to make it works? To change the height ?
Thanks for your time.
You can use css directly on img. This method maintains the Aspect Ratio of the Picture
Demo
http://jsfiddle.net/ykf6b5ot/
CSS (adjust the min and max % to suit the image size you like)
img {
max-width:70%;
max-height: 70%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Or you can use a single class
HTML
<div class="overlay">
<img class="image" src="https://pbs.twimg.com/profile_images/471998783933251584/IF367cAS.jpeg" alt="" />
</div>
CSS
.image {
max-width:50%;
max-height: 50%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Demo
http://jsfiddle.net/1w9s9wx7/
For the wrapper imgActive you do exactly the same as the image CSS and adjust the height/width % you like. 100% is full screen
CSS
.imgActive {
-webkit-transform: translate3d(0px, 0px, 0px);
height: 50%;
width: 50%;
z-index: 1000;
border:1px solid red;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Demo
http://jsfiddle.net/z69t00ns/
I'm currently aligning an image to the bottom of my div as well as centering it with the following css:
html:
<div class="hello">
<img src="http://bit.ly/1gHcL8T" class="helloImage" />
</div>
css:
.hello {
width: 80%;
height: 200px;
position: relative;
}
.helloImage {
position: absolute;
width: 100px;
left: 50%;
margin-left: -50px;
bottom: 0;
}
However, I want to make this image also responsive by giving it a width as percentage. How would I accomplish this?
JSFiddle:
http://jsfiddle.net/8e7UM/1/
If you're supporting modern browsers, you can do this.
.helloImage {
left: 50%;
bottom: 0;
width: 80%;
position: absolute;
transform: translateX(-50%);
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
And here is the basic version, without the fancy transforms.
.helloImage {
left: 10%;
right: 20%;
bottom: 0;
position: absolute;
}
I'm trying to position an image in determined height.
Just like this main image:
http://littlelines.com/
I have this:
HTML
<div class="present100">
<img id="imagem" src="teste.jpg" />
</div>
CSS
.present100 {
width: 100%;
height: 620px;
background-color: #333;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
margin: auto;
}
#imagem {
position: relative;
width: 100%;
min-width: 1300px;
min-height: 100%;
}
I don't know how to center the image on resize just like the http://littlelines.com/
Not sure why you have absolute position on the .present100 element, but you will have to absolutely position the image as well
#imagem {
position: absolute;
width: 100%;
min-width: 1300px;
min-height: 100%;
left:50%;
top:50%;
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Demo at http://jsfiddle.net/gaby/vMyvc/