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
Related
I am trying to build a page that will display a .png image of a computer (with a transparent screen), which I can then layer a website screenshot behind and scroll through, to give the effect of scrolling a real website.
For example, this page, but it can be with a scrollbar instead of automatic scrolling: http://preview.themeforest.net/item/fwrd-music-band-musician-wordpress-theme/full_screen_preview/12087239
I've actually managed to achieve the required, but I can only scroll the long website image (#instagram) when I 'inspect' the page. I assume the #laptop image is blocking the #instagram image somehow?
#container {
position: relative;
top: 0;
left: 0;
}
#instagram {
z-index: 1;
width: auto;
height: 400px;
border-radius: 5px;
overflow: scroll;
position: absolute;
top: 0px;
left: 0px;
}
#laptop {
z-index: 2;
width: auto;
height: auto;
position: relative;
top: 0;
left: 0;
}
You could use a pseudo element with pointer events none for your laptop and then just position your scrollable background where the screen is:
.laptop {
position: relative;
/* width and height of laptop image */
width: 584px;
height: 360px;
}
.laptop:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:url(https://pngimg.com/uploads/laptop/laptop_PNG5938.png) left top no-repeat;
background-size:cover;
z-index:2;
pointer-events:none;
}
.background {
/* width and height of screen */
width:414px;
height:229px;
overflow:auto;
position:absolute;
/*POsition of screen in image */
top: 28px;
left:82px;
}
<div class="laptop">
<div class="background">
<img src="https://www.fillmurray.com/412/600">
</div>
</div>
<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 have exactly the problem from this question but I can't comment (as I have less than 50rep).
It has to do with getting a better performance out of blurring a full screen image through GPU acceleration but not having the sides "leaking".
If you don't mind adding an additional div, you can add a wrapper and apply the transformation to it.
I checked in Chrome Dev Tools and indeed Chrome rendered the wrapper #bg into a separate layer, although this kind of optimizations are very browser specific.
I would recommend reading https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/
I would give you another suggestion however, instead using a big image and blur it, you can use the same image at a very low resolution (say 10x10 px) and make it full-screen. Almost the same result, but with far lesser bytes to load.
html {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background: red;
position: relative;
width: 100%;
min-height: 100%;
}
#bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
transform: translate3d(0,0,0);
}
#bg > div {
background-image:url('http://lorempixel.com/1920/1920/');
background-size: cover;
position: absolute;
left: -60px;
top: -60px;
right: -60px;
bottom: -60px;
filter: blur(60px);
}
<div id="bg">
<div></div>
</div>
I am trying to hide the overflow of an HTML5 video that is wrapped in a container. However there are still scroll bars in firefox and chrome. When I try to recreate the issue in Jsfiddle, it works fine (no scrollbars), but the same code in firefox or chrome creates a scroll and does not hide any overflow.
Any idea how I can get the overflow of an HTML5 video to hide, and why it's not working? PS. I have tried changing the position of the container to various things and have tried breaking overflow: hidden down to overflow-x and overflow-y
<div class="video_container">
<video autoplay loop controls muted="true"class="video_window">
<source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
CSS
.video_container{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -100;
overflow:hidden
}
video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#media (min-aspect-ratio: 16/9) {
video {
height: 300%;
top: -100%;
}
}
#media (max-aspect-ratio: 16/9) {
video{
width: 300%;
left: -100%;
}
}
This one should do the trick if you meant those annoying bars with scroll element on your DIVs. Set this to your wrapper element (e.g. .video_container)
&::-webkit-scrollbar {
display: none;
}
I am trying to get into responsive design/layout with Bootstrap and CSS, but I am kind of confused of how could a change a box to be in the center of the screen.
I have a login pane that in Google Chrome has size 277x256 (that size could fit many smartphone screens). So I made a CSS like that:
.login .pane {
position: absolute;
top: 50%;
left: 50%;
margin: -128px -138.5px; /* half of the size in Google Chrome */
background: #f0f0fd;
background: rgba(240,240,253,0.90);
padding: 22px 32px;
}
You can see the complete code in: http://jsfiddle.net/H5Qrh/1/
=== UPDATE ===
I made a cleaner code and tried using Absolute Centering instead of Negative Margins:
.center-pane {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
max-width: 277px;
height: 320px;
}
My updated Fiddle: http://jsfiddle.net/H5Qrh/3/
Now the footer is above the box.. that shouldn't occour.
You're using absolute but I'd change that to fixed (this will work on both).
I set your height and widths, but you can change them, and because you want it responsive, you can change them with a few media queries. For example mobile you might want width to be 90% or 100%.
.login .pane {
position: fixed; /* could be absolute */
top: 0; left: 0; bottom: 0; right: 0;
margin: auto;
width: 300px;
height: 250px;
}
Here's a jsfiddle