I'm working on a site where the first thing the user see is a video. I want that video to be full screen, but to also allow scrolling.
Something like this: http://wearefetch.com/
As you can see, the video is fullscreen but you can also scroll down.
I've searched the web a bit but didn't find anything particularly helpful. If anybody can nudge me in the right direction I'd be grateful.
try this
video#bgvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(polina.jpg) no-repeat;
background-size: cover;
}
HTML
<video autoplay loop poster="polina.jpg" id="bgvid">
<source src="polina.webm" type="video/webm">
<source src="polina.mp4" type="video/mp4">
</video>
If screen width is bellow 800px
#media screen and (max-device-width: 800px) {
html { background: url(polina.jpg) #000 no-repeat center center fixed; }
#bgvid { display: none; }
}
visit here for more details
Related
I am trying to replace my website's header with a background video and am having trouble scaling it to desired size when on mobile. After messing around, I have found the following code to be working on all browsers on desktop when placed in the home section of my page.
<video playsinline autoplay muted loop poster="https://www.matelasdepot.net/video/video-restaurant.jpg" id="bgvid">
<source src="https://www.matelasdepot.net/video/video-restaurant.webm" type="video/webm">
<source src="https://www.matelasdepot.net/video/video-restaurant.mp4" type="video/mp4">
</video>
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
max-width: none;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background-size: cover;
transition: 1s opacity;
overflow: hidden;
}
However, on mobile - the video doesn't scale. I'm not sure how to use #media with the video tag as every time I tried it didn't seem to impact the video at all. Does anybody have a clue on how I could fix this? Any help would be appreciated!
I have tried resizng the video with the following but it did not work
#media (max-width: 767px) {
video {
width: 300%;
height: 300%;
}
}
I'm trying to precent a video from jumping when it loads, I have applied this aspect ratio padding trick which works fine, but not when the video requires a max-width, the padding applied seems too much and never fits correctly. Any ideas?
Reference links:
https://css-tricks.com/aspect-ratio-boxes/
https://itnext.io/how-to-stop-content-jumping-when-images-load-7c915e47f576
.video-wrap {
position: relative;
height: 0;
padding-top: calc(675 / 1200 * 100%);
}
#tutorial-video {
position: absolute;
top: 0;
left: 0;
max-width: 600px;
width:100%;
height: auto;
}
<div class="video-wrap">
<video id="tutorial-video" width="100%" poster="/assets/video-poster.jpg" autoplay loop playsinline>
<source src="/videos/tutorial.mp4" type="video/mp4">
</video>
</div>
Fiddle:
https://jsfiddle.net/ko1L84b5/2/
<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 am having an issue with the resizing of a full screen video, within a bootstrap template.
Here is the live example? http://velnikolic.com/toad/index.php# below 1400px and in safari browsers the video ratio gets very distorted.
<div class="fullscreen-bg">
<video loop muted autoplay poster="thumbnail.png" class="fullscreen-bg__video">
<source src="video.mp4" type="video/mp4">
</video>
</div>
/*Video*/
.fullscreen-bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
height: 600px;
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 600px;
}
#media (min-aspect-ratio: 16/9) {
.fullscreen-bg__video {
width: 100%;
height: auto;
}
}
I think you should consider few Website optimization techniques. compress your thumbnails and other media content in order to load faster. it took me more than a minute for me to load your website.
One more thing i noticed, that is while resizing my browser window, when i switched to mobile view. the video block dissappears. which you can correct by using changing the following code
In your style.css line 450 -
#media (max-width: 767px)
.fullscreen-bg__video {
display: inline-block;
vertical-align:baseline;
}
/*your this css settings are fine*/
#media (min-aspect-ratio: 16/9) {
.fullscreen-bg__video {
width: 100%;
height: auto;
}
}
And I think you just updated the website and the video quality has degraded and when re-sized video is being paused. your last configuration was fine just u had kept width:600% somewhere in css.
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;
}